JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<div class="scroll" data-scrollid="1">
    <ul>
        <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>        
        <li>Keep Scrolling scrolling scrolling</li>
                <li>Keep Scrolling scrolling scrolling</li>
     ...

CSS

.scroll{
    display: inline-block;
    width: 200px;
    height: 200px;
    overflow-y: auto;
}

.scroll:last-child {
    overflow-y: none;
    overflow-x: auto;
    white-space: nowrap;
    width: 400px;   
}
.scroll:last-child ul{
        display: block;
    white-space: nowrap;
}
.scroll:last-child ul li{
    display:inline-block;
}

JavaScript

(function($){

    var methods = {
        
        /**
         * @var options default options
         */
        options : {
            /**
             * @var eventTimeOut number the time in milliseconds 
             */
            eventTimeOut : 200 
        },
        
        /**
         * init
         *
         * method that applies brings everything together
         *
         * @param options object an object that overwrites the default options
         * @return null
         */
        init : function(options){
            // overwrite defaults
            $.extend(methods.options, options);
            // bind on scroll
            
            var callback = function(el){
                // convert this scroll percent
                var scroll_percent = methods.convertScrollToPercent.call(el, el.data("horizontal"));
                // console.log(scroll_percent);
                var me = el.data("scrollid");
                
                $.each($(".scroll"), function(){
                    if(me !== $(this).data("scrollid")){
                        methods.scrollToPercent.call(this, scroll_percent, $(this).data("horizontal"));
                    }
               
                })
                
            }
            
            methods.onScrollEnd.call($(this), callback, methods.options.eventTimeOut);
            
        },
        
        /**
         * convertScrollToPercent
         *
         * converts the scroll position to percent and returns it.
         *
         * @return number the percentage (duh)
         */
        convertScrollToPercent : function (horrizontal){
            // Defaults
            
            var horrizontal = $(this).data("horizontal") | false,
                scrollStyle = (horrizontal ? "scrollLeft" : "scrollTop"),
                scrollWidth = (horrizontal ? "scrollWidth" : "scrollHeight");
            // get top and scroll position
            
            var 
                top =...