JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="l">

</div>

<div class="m">
    <div >
        
    </div>
</div>

<div class="l">

</div>

CSS

.l{
    height: 400px;
    background: blue;
    
}
.m{
    height: 300px;
    background: gold;
    overflow-x: scroll;
}
.m div{
    height: 100%;
    width: 2000px;
}

JavaScript

var offsetTopM =  {};
$(document).ready(function(){
  offsetTopM.Top    = $(".m").offset().top;
  offsetTopM.Height = $(".m").height();
  offsetTopM.flag   = false;         //флаг блокировки скролла
  offsetTopM.lock   = false;         //флаг блокировки повторного скролла
  offsetTopM.Array  = new Array(0,0);//массив для хранения значений скролла
  offsetTopM.Speed  = 200; //скорость прокрутки скролла в желтой части 
})
    
var scrollWindLeft  = 0;
$(document).scroll(function(){
    if(offsetTopM.lock == false){
      myScroll(); 
    }else{
      offsetTopM.lock  = false;
    }
    
})
//вынесли в отдельную функцию, для облегчения управления
function myScroll(){
  
    var scrollWindTop      = $(document).scrollTop();
    var scrollWindWidth    = $(".m div").width();
    
    //исключаем повторяющиеся значения в массиве
   if(offsetTopM.Array[1] != scrollWindTop){
      offsetTopM.Array[0]  = offsetTopM.Array[1];
      offsetTopM.Array[1]  = scrollWindTop;
    }
    var directNow          = direct();
   
    //включаем флаг блокировки скролла
    if (scrollWindTop > offsetTopM.Top &&
        scrollWindTop < offsetTopM.Top
                      + offsetTopM.Height
       ){
      offsetTopM.flag      = true;
     }
    
    if (offsetTopM.flag    == true ){
     $(window).scrollTop(offsetTopM.Top);
        //заблочили выполнение функции, для  отмены её второго повторения
        offsetTopM.lock    = true; 
        //определяем прибавление к скроллу + или -
        if (directNow      == "top"){
            scrollWindLeft += offsetTopM.Speed;
        }else{
            scrollWindLeft = scrollWindLeft - offsetTopM.Speed;
        }
     
     $(".m").scrollLeft(scrollWindLeft);
        if (scrollWindLeft >= scrollWindWidth){
            scrollWindLeft  = scrollWindWidth;
             $(window).scrollTop(offsetTopM.Top +offsetTopM.Height);
            offsetTopM.flag = false;
        }
        if (scrollWindLeft <  0){
            scrollWindLeft  = 0;
           ...