JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div class="slide-wrap">
    <div class="slide">
        1
    </div>
    <div class="slide">
        2
    </div>
    <div class="slide">
        3
    </div>
    <div class="slide">
        4
    </div>
    <div class="slide">
        5
    </div>
    <div class="slide">
        6
    </div>
    <div class="slide">
        7
    </div>
</div>


<div class="slide-wrap">
    <div class="slide">
        1
    </div>
    <div class="slide">
        2
    </div>
    <div class="slide">
        3
    </div>
    <div class="slide">
        4
    </div>
    <div class="slide">
        5
    </div>
    <div class="slide">
        6
    </div>
    <div class="slide">
        7
    </div>
</div>

CSS

.slide-wrap {
    border: 1px solid black;
    overflow: auto;
    white-space: nowrap
}

.slide {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: #eee;
    margin: 10px;
}

JavaScript

var slidesnapper = (function() {
    var snapper = {};
    snapper.init = function(slideWrapInstance) {
    	console.log("init");
        slideWrapInstance.addEventListener("scroll", snapper.onScroll);
    };
    snapper.m = 0;
    snapper.onScroll = function(e) {
        var c = Math.abs(checkScrollSpeed(e.target));
        console.log(c);
        snapper.m = (c > snapper.m)?c:snapper.m;
        if(snapper.m>50 && c<3){
        	e.target.scrollLeft = 100;//TODO - find the nearest item position
            snapper.m = 0;
        }
    };
    
    
    //for each .slide-wrap:
    var slideWrap = document.querySelectorAll(".slide-wrap");
    for (i = 0; i < slideWrap.length; ++i) {
        snapper.init(slideWrap[i]);
    }
    
    //OR 
    //we coudl add a delegated listener. So listen for scroll on the doc
})();



var checkScrollSpeed = (function(el){
     var lastPos = null, newPos, timer, delta, 
        delay = 50; // in "ms" (higher means lower fidelity )
  
    function clear() {
      lastPos = null;
      delta = 0;
    }
  
    clear();
    
    return function(el){
      newPos = el.scrollLeft;
      if ( lastPos != null ){ // && newPos < maxScroll 
        delta = newPos - lastPos;
      }
      lastPos = newPos;
      clearTimeout(timer);
      timer = setTimeout(clear, delay);
      return delta;
    };
})();