Как синхронизировать полосы прокрутки двух разных divs в JavaScript/jQuery?

Question

У меня есть два div на моей странице index.html, и я загружаю другой контент в каждый div, выбирая div и вставляя содержимое в него (с помощью jQuery). Поэтому я получаю два divs, каждый div имеет горизонтальные полосы прокрутки для отображения своего содержимого. То, что я пытаюсь сделать, это синхронизировать две полосы прокрутки и, если есть возможность иметь только одну полосу прокрутки для двух div.

Благодарим вас за ваш ответ и извините, если я допустил ошибки на английском языке, потому что это не мой родной язык.

Answer 1

Вы можете получить позицию текущей прокрутки с помощью функции JQuery в scrollLeft(), описано здесь: http://api.jquery.com/scrollleft/

Вы только что создали два свитка слушателей, что огонь друг друга (не забудьте поставить это в готовые функция документа):

var div1 = $('#scrollDiv-1'); 
var div2 = $('#scrollDiv-2'); 

div1.scroll(function() { 
    div2.scrollLeft($(this).scrollLeft()); 
}); 

div2.scroll(function() { 
    div1.scrollLeft($(this).scrollLeft()); 
}); 

Вы можете положить в задержке времени, используя setTimeout или setInterval, чтобы сэкономить ресурсы.

Answer 2

На самом деле я пытался использовать этот код:

$("#div1").scroll(function() { 
 
    \t $("#div2").scrollLeft($("#div1").scrollLeft()); 
 
    }); 
 
$("#div2").scroll(function() { 
 
    \t $("#div1").scrollLeft($("#div2").scrollLeft()); 
 
    });

, который работал на простой пример с двумя дивами, но я не мог добавить этот код на index.html, извините я не может показать код, потому что он является конфиденциальным, но у меня есть только два div, где я помещал контент с помощью функции jQuery. Поэтому я не понимаю, почему приведенный выше код работает в случае и не работает в другом.