Прокрутите 2 полосы прокрутки с помощью jquery одновременно

Ответ 1

Все, что вам нужно сделать, привязывает свойство scrollTop одного элемента к элементу scrollTop другого, используя функцию, связанную с событием scroll.

Что-то по строкам:

$('.linked').scroll(function(){
    $('.linked').scrollTop($(this).scrollTop());    
})

С помощью этой функции все элементы с классом linked будут прокручиваться всякий раз, когда вы используете полосы прокрутки одного из них. (Я предполагал, что вертикальная прокрутка, если вы хотите горизонтальный, сделать то же самое, но с scrollLeft)

См. http://jsfiddle.net/g8Krz/510/ для рабочего примера выше.

Ответ 2

(добавить beeglebug):

Для горизонтальной "связанной" прокрутки используйте:

$('.linked').scroll(function(){
    $('.linked').scrollLeft($(this).scrollLeft());
});

Ответ 3

Я хочу добавить небольшое улучшение в решение beeglebug (которое уже работает почти идеально).

Если вы обнаружите ОЧЕНЬ МЕДЛЕННОЕ ПРОКРУТКА, используя MOUSEWHEEL в некоторых браузерах (например, OPERA), попробуйте использовать уникальные идентификаторы для DIV вместо класса:

$('#master').scroll(function(){
$('#slave').scrollTop($(this).scrollTop());
}); 

У меня была эта проблема и я попробовал много решений, но этот, наконец, был самым простым. Принимая дикие предположения, я бы утверждал, что OPERA получает некоторые проблемы с производительностью, одновременно идентифицируя DIV по классу при прокрутке. (просто заметил массивный рост использования ЦП при использовании класса как идентификатора)

Ответ 4

Если вы испытываете медленную прокрутку, когда вы используете свою колесико мыши при соединении полос прокрутки с помощью решения beeglebug, вот трюк, чтобы исправить это.

Самое интересное, что он является компактным, и он не использует никаких id, только классы, что намного более устойчиво.

// First add the class "linked-scrollbar" to the elements you want to link

// Then manually or dynamically add an attribute which will contain
// the data if the element is currently scrolling or not
$('.linked-scrollbar').attr("data-scrolling", "false");

$('.linked-scrollbar').scroll(function(){
    if($(this).attr("data-scrolling") == "false"){
        $('.linked-scrollbar').not(this).attr("data-scrolling", "true");
        $('.linked-scrollbar').not(this).scrollLeft($(this).scrollLeft());
    }
    $(this).attr("data-scrolling", "false");
});

Вот jsfiddle, показывающий эту ошибку и исправление.