Дергается блок при зависимых скролах

283

22 марта 2017, 15:03

Мне необходимо реализовать сложное меню из зависимыми скролами. Первый пункт имеет скрол. Некоторые подпункты имеют также скролы (в зависимости от подпунктов). Третий уровень, карточка, всегда имеет одинаковые размеры.. Я это реализовал, Но возникла проблема - при прокрутке 2 уровня сильно дергается карточка... находил в интернете реализацию с фиксацией карточки, но не знаю как определить момент начала и конца скрола... насколько я понял, то событие скрол возникает с определенной задержкой, поэтому и возникают эти дёргания... В общем виде проблему упрощено показал ниже (нажмите выполнить, в разных браузерах это дёргание видно по разному, в одних больше, в другие меньше)

      $('.scroll-1-wrapper').scroll(function(){ 
        var top = $(this).scrollTop(), 
            top_second = $('.scroll-2-wrapper').scrollTop(); 
 
        $(".scroll-2-wrapper").css("top", top); 
        $(".scroll-2-wrapper").css("bottom", top * -1); 
 
        $(".scroll-3-wrapper").css("top", top_second); 
        $(".scroll-3-wrapper").css("bottom", top_second * -1); 
      }); 
 
      $(".scroll-2-wrapper").scroll(function(){ 
        var top = $(this).scrollTop(); 
 
        $(this).find(".scroll-3-wrapper").css("top", top); 
        $(this).find(".scroll-3-wrapper").css("bottom", top * -1); 
      });

.scroll-1-wrapper, .scroll-2-wrapper { 
  overflow: auto; 
  position: relative; 
} 
 
.scroll-1-wrapper{ 
  width: 640px; 
  border: 1px solid red; 
} 
.scroll-2-wrapper{ 
  width: 420px; 
  border: 1px solid green; 
} 
 
.scroll-3-wrapper{ 
  width: 200px; 
  border: 1px solid blue; 
} 
 
.scroll-1-wrapper, .scroll-2-wrapper, .scroll-3-wrapper, .scroll-3-element { 
  height: 400px; 
} 
 
.scroll-1-element, .scroll-2-element { 
  height: 1000px; 
} 
.scroll-1-element, .scroll-2-element, .scroll-3-element { 
  width: 150px; 
  background: linear-gradient(to top, #fe2512, #fef750, #080cf1); 
  border: 1px solid #000000; 
} 
 
.scroll-2-wrapper, .scroll-3-wrapper { 
  position: absolute; 
  left: 180px; 
  top: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="scroll-1-wrapper"> 
  <div class="scroll-1-element"> 
    <div class="scroll-2-wrapper"> 
      <div class="scroll-2-element"> 
        <div class="scroll-3-wrapper"> 
          <div class="scroll-3-element">scroll-3-element</div> 
        </div>   
      </div> 
    </div> 
  </div> 
</div>