Scroll Like Slider

by Yunus Gaziev

HTML

<div class="kz-scroller">
  <div class="kz-scroller__mask">
    <div class="kz-scroller__body">
      <div class="scroll-item">1</div>
      <div class="scroll-item">2</div>
      <div class="scroll-item">3</div>
      <div class="scroll-item">4</div>
      <div class="scroll-item">5</div>
      <div class="scroll-item">6</div>
      <div class="scroll-item">7</div>
      <div class="scroll-item">8</div>
      <div class="scroll-item">9</div>
      <div class="scroll-item">10</div>
      <div class="scroll-item">11</div>
      <div class="scroll-item">12</div>
      <div class="scroll-item">13</div>
      <div class="scroll-item">14</div>
      <div class="scroll-item">15</div>
      <div class="scroll-item">16</div>
      <div class="scroll-item">17</div>
      <div class="scroll-item">18</div>
      <div class="scroll-item">19</div>
      <div class="scroll-item">20</div>
      <div class="scroll-item">21</div>
      <div class="scroll-item">22</div>
      <div class="scroll-item">23</div>
      <div class="scroll-item">24</div>
      <div class="scroll-item">25</div>
    </div>
  </div>
  <button type="button" class="kz-prev">Prev</button>
  <button type="button" class="kz-next">Next</button>
</div>

<div class="kz-scroller">
  <div class="kz-scroller__mask">
    <div class="kz-scroller__body">
      <div class="scroll-item">1</div>
      <div class="scroll-item">2</div>
      <div class="scroll-item">3</div>
      <div class="scroll-item">4</div>
      <div class="scroll-item">5</div>
      <div class="scroll-item">6</div>
      <div class="scroll-item">7</div>
      <div class="scroll-item">8</div>
      <div class="scroll-item">9</div>
      <div class="scroll-item">10</div>
      <div class="scroll-item">11</div>
      <div class="scroll-item">12</div>
      <div class="scroll-item">13</div>
      <div class="scroll-item">14</div>
      <div class="scroll-item">15</div>
      <div class="scroll-item">16</div>
      <div class="scroll-item">17</div>
     ...

SCSS

body,
html {
  padding: 20px 0;
}

body {
  font-family: Consolas, sans-serif;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.d-scrollbars {
  width: 240px;
	height: 100px;
	overflow: scroll;
  position: absolute;
	top: -9999px;
}

.kz-scroller {
  width: 100%;
  margin: 15px 0;
  
  &__mask {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  &__body {
    width: 100%;
    padding: 0 5px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
    white-space: nowrap;
  }
}

.scroll-item {
  width: calc(20% - 10px);
  height: 160px;
  
  line-height: 160px;
  font-size: 16px;
  color: #fff;
  
  text-align: center;
  
  background-color: blue;
  
  display: inline-block;
  vertical-align: top;
  border-radius: 4px;
  margin: 5px;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

;(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

var getScrollbarsSize = function (selector) {

  var scrolledDiv = document.getElementById(selector);
  
  return {
    width  : scrolledDiv.offsetWidth - scrolledDiv.clientWidth,
    height : scrolledDiv.offsetHeight - scrolledDiv.clientHeight
  }
}

var scrollBarsDimensions = getScrollbarsSize('stuffDScrollbars');

function kzScroller(sroller) {

    this.RAF     = null;
    this.mask    = sroller.querySelector('.kz-scroller__mask');
    this.body    = sroller.querySelector('.kz-scroller__body');
    this.prevBtn = sroller.querySelector('.kz-prev');
    this.nextBtn = sroller.querySelector('.kz-next');

    this._scroll = 0;
    this._step   = this.mask.clientWidth / (60 / (1000/ 500));

    this.body.style.marginBottom =...