I need to implement a complex menu of dependent scrolls. The first item has scrolled. Some sub-items also have scrolls (depending on the sub-items). The third level, the card, always has the same size .. I implemented it, but a problem arose - when scrolling level 2, the card was twitching strongly ... I found implementation on the Internet with fixing the card, but I don’t know how to determine the start and end of the scroll ... as far as I understand, the scrolling event occurs with a certain delay, so this jerking occurs ... In general, the problem is simplified shown below (click execute, in different browsers this jerking is seen in different ways, in some more, in others less)

$('.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>

  • one
    And the usability of this complex menu of dependent scrolls is exactly high? There is no possibility to implement the same functionality more conveniently and without tripping over the false bugs ? - Tachkin
  • I have already reduced this menu to the maximum and the information that is displayed there ... the design menu, so I get attached to it ... - Alex

0