How can this be done?

The second block has jScrollPane connected, it has vertical and horizontal scrolling.

When scrolling this block horizontally, it is necessary that the first block also scrolls after it. How can this be done?

The jScrollPane script to the first block is not an option, since horizontally it is static.

$(function() { var block1 = $('.jspPane'); console.log(block1); var block2 = $('.event-time__time'); console.log(block2); block1.onscroll = function() { block2.scrollTop = block1.scrollTop; block2.scrollLeft = block1.scrollLeft; }; });

    1 answer 1

    You can track the scroll using the onScroll event, and after the value of the scroll, assign to another block:

     block1.addEventListener("scroll", function() { block2.scrollTop = block1.scrollTop; block2.scrollLeft = block1.scrollLeft; }); 

     $(function() { var block1 = $('.jspPane'); console.log(block1); var block2 = $('.event-time__time'); console.log(block2); block1.onscroll = function() { block2.scrollTop = block1.scrollTop; block2.scrollLeft = block1.scrollLeft; }; });

    • Will this scrolling be simultaneous with the second block? Or will the movement be after? - drtvader
    • Moving will be after, but the delay is so minimal that we can say that they will move simultaneously. - WanSpi
    • As I understand it, tracking is done like this: block1.onscroll = function () {var scrolled = block1.pageXOffset; block1.addEventListener ("scroll", function () {block2.scrollTop = block1.scrollTop; block2.scrollLeft = block1.scrollLeft;}); } - drtvader
    • Not true, firstly the pageXOffset value refers to the page itself, and exists only in the window object, secondly the block1.onscroll and block1.addEventListener("scroll", ... ) events are completely the same, and it turns out that when you scroll, you add another event. The code I wrote already includes a handler and block1.addEventListener("scroll", ... ) assignment, or you can replace the string block1.addEventListener("scroll", ... ) with block1.onscroll as you block1.onscroll . - WanSpi
    • I swear Uncaught TypeError: block1.onscroll is not a function, I understand that onscroll does not have time to define the variable $ (function () {var block1 = $ ('. jspPane'); console.log (block1); var block2 = $ ( '.event-time__time'); console.log (block2); block1.onscroll (function () {block2.scrollTop = block1.scrollTop; block2.scrollLeft = block1.scrollLeft;});}); - drtvader