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;
}

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);
                // console.log(scroll_percent);
                var me = el.data("scrollid");
                
                $.each($(".scroll"), function(){
                    if(me !== $(this).data("scrollid")){
                        methods.scrollToPercent.call(this, scroll_percent);
                    }
               
                })
                
            }
            
            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 (){
            // get top and scroll position
            var 
                top = $(this).scrollTop(),
                height = $(this)[0].scrollHeight - $(this).height();
            
            console.log("top :" + top + ", height :" + height);
            // height == 100 then what does top equal? ()
            var 
             answer = 100*top,
             answer = answer/height
             
          ...