Getting one element to match the scrolling of another

I have two tall and narrow elements of equal height that are next to each other. When I scroll one of these two elements, I want the other to scroll with it.

How开发者_如何学JAVA can I do this using jQuery? I've tried the ScrollTo plugin but the documentation is so bad I can't figure out how to use it.

This can be accomplished with some simple jQuery, as shown in this example (link).

Basically, you just set the .scrollTop() of one div to mimick the other on the scroll() event handler:

$('#leader').scroll(function(e){
    $('#copycat').scrollTop($(this).scrollTop());
});

Please go through this tutorial and change the code like what you want

This is not the answer you are looking for, but it needs to be said: what you are doing is bad design, it has been done many times before and has never been part of a nice userinterface. Instead of wasting a lot of energy on creating a solution where you battle the browsers, spend it coming up with a design that works better, and is easier to implement.

In your case: if you wish two lists of objects to scroll together, make them live under a single scrollbar.

For instance if it is two multiple select boxes, just make sure they both have the full height of their contents so their scrollbars become inactive/disappear, and then wrap them in a div with a smaller height and set it to overflow: scroll.

In general if you come up against something like this where there is no clear and easy way to do it, stop and think why that is, and maybe you will realize that it is because it is a bad idea.

This will certainly not always be true, but quite often it will.