There are two div-block # block1 and # block2 . When scrolling the first block by moving its scroll bar, the second block should scroll, i.e.

$('#block1').scroll(function() { var scrollTop = $(this).scrollTop(); $('#block2').scrollTop(scrollTop); });

At the same time, when scrolling the second block, but this time turning the mouse roller (mousewheel) over it, and not by moving its scroll bar, the first block should scroll. If I finish the second function

 <script src="jquery.mousewheel.js"></script> ... $('#block2').mousewheel(function() { var scrollTop = $(this).scrollTop(); $('#block1').scrollTop(scrollTop); });

then when scrolling the second block of mice, in addition to the second one, the first function is also started and the scrolling is obtained incorrectly, as if “double” scrolling, one in the other.

How in the first function instead of scroll(function() to specify specifically "moving the scrollbar" so that there is no problem described above?

  • As an option, check in the first function that you scroll not with the mouse. As far as I know, you need to stir up something with the event object. But I’m not going to tell you specifically (you need to look at the flags for MB, you need to look for them). Besides (I could be wrong), but by calling the scrollTop method of the second function, you also activate the triggering of the scroll () {} method - alexoander

1 answer 1

There is such an option:

The first scrolls only if you move the scrollbar.
Second, if you twist the mouse.

 $('#block1').on("scroll", function(e) { e.preventDefault(); var scrollTop = $(this).scrollTop(); $('#block2').scrollTop(scrollTop); }); $('#block2').mousewheel(function(e, i) { e.preventDefault(); var scrollTop = $(this).scrollTop() - i * 10; $(this).scrollTop(scrollTop); $('#block1').scrollTop(scrollTop); }); $('#block1').mousewheel(function(e) { e.preventDefault(); }); 
 #block1, #block2 { border: 2px solid black; max-height: 300px; width: 100px; overflow: scroll; float: left; } #block1 { border: 2px solid red; } .inside { height: 1000px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <div id="block1"> <div class="inside">jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[3] jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web.[4][5][6] jQuery is free, open-source software licensed under the MIT License.[2] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.</div> </div> <div id="block2"> <div class="inside">jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[3] jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web.[4][5][6] jQuery is free, open-source software licensed under the MIT License.[2] jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.</div> </div>