JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<div data-role="content" class="km-content km-scroll-wrapper km-insetcontent" style="overflow: hidden; "><div class="km-scroll-header">blahblah blah</div><div class="km-scroll-container">
    <div class="km-listview-wrapper"><ul data-role="listview" data-style="inset" data-type="group" class="km-listview km-listgroupinset">
        <li><div class="km-group-title"><div class="km-text">
            Africa
            </div></div><ul class="km-list">
                <li><h2>Nairobi</h2><img src="../../content/mobile/overview/nairobi.jpg"></li>
            </ul>
        </li>
        <li><div class="km-group-title"><div class="km-text">
            America
            </div></div><ul class="km-list">
                <li><h2>Boston</h2><img src="../../content/mobile/overview/boston.jpg"></li>
                <li><h2>Ottawa</h2><img src="../../content/mobile/overview/ottawa.jpg"></li>
                <li><h2>San Francisco</h2><img src="../../content/mobile/overview/san-francisco.jpg"></li>
            </ul>
        </li>
        <li><div class="km-group-title"><div class="km-text">
            Asia
            </div></div><ul class="km-list">
                <li><h2>Bombay</h2><img src="../../content/mobile/overview/bombay.jpg"></li>
            </ul>
        </li>
        <li><div class="km-group-title"><div class="km-text">
            Australia
            </div></div><ul class="km-list">
                <li><h2>Melbourne</h2><img src="../../content/mobile/overview/melbourne.jpg"></li>
                <li><h2>Sydney</h2><img src="../../content/mobile/overview/sydney.jpg"></li>
            </ul>
        </li>
        <li><div class="km-group-title"><div class="km-text">
            Europe
            </div></div><ul class="km-list">
                <li><h2>Cannes</h2><img src="../../content/mobile/overview/cannes.jpg"></li>
                <li><h2>Liverpool</h2><img src="../../content/mobile/overview/liverpool.jpg"></li>
                <li><h2>London</h2><img...

CSS

.km-scroll-wrapper
{
   width:300px;
   height:100%;
   background-color:#ccc;   
}

JavaScript

$(".km-scroll-wrapper").mousedown(function(e){

    var $this = $(this);
            
    $this.data("initialY", e.pageY)
         .data("oldY", 0 );
    
    console.log("initialY " + e.pageX);
    
    $this.on("mousemove", function(e){
        
        var $this = $(this),
            initialY= $this.data("initialY"),
            pageY = e.pageY,
            newY = pageY - initialY;
        
        if(newY !== 0){
        
            console.log("newY " + newY);
            console.log("initialY " + initialY);
            console.log("pageY " + pageY );
    
            $(".km-listview-wrapper").css({"-webkit-transform": "translate3d(0px, " + newY + "px, 0px)"});
        
        }

    });

    $this.on("mouseup mouseend mouseleave", function(e){
    
          $(this).off("mousemove");            
        
    });

});