JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll">
    <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>
        <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling scrolling</li>
        <li>Keep Scrolling scrolling...

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: 200px;
    height: 50px;
}
.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: 0,

            /**
             * @var scrollSpeed number the time in milliseconds the other light boxes should take to scroll to their relevant point.
             */
            scrollSpeed: 5000
        },

        /**
         * 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);
            
            /**
             * @var $this object cached global jQuery variable
             */
            var $this = $(this);
            
            // Assign IDs. Used to prevent jittering of element that is calling.
            var id_num = 0;
            $(this).each(function(){
                $(this).data("scrollid", id_num);
                id_num++;
            });
            
            // bind on scroll
            var callback = function (el) {
                
                var 
                   /**
                    * @var scroll_percent number percentage of top of element scrolled
                    */
                    scroll_percent = methods.convertScrollToPercent.call(el),
                    /**
                     * @var me number scroll id of element calling the scroll method
                     */
                     me = el.data("scrollid");
                
                // Loop through each
                $.each($this, function () {
                    // Set scroll to false to prevent this element from calling same event
                    $(this).data("scroll", false);
                    // if it's the same element, skip
...