JSFiddle - React, Tailwind, and code Playground

by Daniel Cheung

HTML

<div class="demo2">
    <ul>
        <li>
            <a href="#"> Demo Style No 1 </a>
             </li> 
        <li>
            <a href="#"> Demo Style No 2 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 3 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 4 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 5 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 6 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 7 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 8 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 9 </a>
             </li>
        <li>
            <a href="#"> Demo Style No 10 </a>
             </li>
    </ul>
</div>

CSS

.demo1, .demo2 { width:45%;display:inline-block;background:#ccc }

.demo1 ul , .demo2 ul { padding:0;margin:0 }

.demo1 ul li, .demo2 ul li { list-style:none;padding:5px }

.demo2 { overflow:hidden;overflow-y:scroll }

JavaScript

$(function(){
    var lih = $(".demo2 li").outerHeight(),
        lst = 0,
        f=0;
    $(".demo2").outerHeight(lih*3).scroll(function(e){
        var $this = $(this)
            ,st = $this.scrollTop();
        function _scroll(n) {
            $this.css("overflow","hidden").stop().animate({scrollTop:lst+(n)*lih*3}, 500, "swing", function(){setTimeout(
                function(){                    
                    $this.css("overflow","auto");
                    setTimeout(function(){f=0},50);
                },500)
            })
        }
        if (!f) {
            f=1;
            if (st > lst)
                _scroll(1);
            else
           	    _scroll(-1);
       }
       lst = st;
    });
})