Как я синхронизирую позицию прокрутки двух отделений?
Я хочу иметь 2 отделения, измеренные к особой ширине (т.е. 500 пкс). Один над другим выровненный горизонтально.
Главное поле должно скрыть свою полосу прокрутки, нижняя часть должна показать полосу прокрутки и когда пользователь прокручивает, я хотел бы, чтобы смещение главного поля изменилось на значение контрбуксы. Так, чтобы, когда нижняя часть DIV прокручивает горизонтально, казалось, что главный DIV также прокручивает в унисон.
Я рад сделать это в JQuery, если он делает процесс легче.
1 ответ
Я заметил, что его вопрос был довольно стар, но я думал, что мог оставить реализацию jQuery, которая работает намного лучше, чем использование таймеров. Здесь, я использую двух слушателей события как ранее используемые решения, но, это будет использовать пропорции/процент для синхронизации прокруток для двух по-другому размерных полей отделения. Можно применить это то же знание для получения положения полосы прокрутки к Ванильному решению JS. Это сделает прокрутку между этими двумя отделениями намного более гладкой.
/** Scroll sync between editor and preview **/
// Locks so that only one pane is in control of scroll sync
var eScroll = false;
var pScroll = false;
// Set the listener to scroll
this.edit.on('scroll', function() {
if(eScroll) { // Lock the editor pane
eScroll = false;
return;
}
pScroll = true; // Enable the preview scroll
// Set elements to variables
let current = self.edit.get(0);
let other = self.preview.get(0);
// Calculate the position of scroll position based on percentage
let percentage = current.scrollTop / (current.scrollHeight - current.offsetHeight);
// Set the scroll position on the other pane
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
});
this.preview.on('scroll', function() {
if(pScroll) { // Lock the preview pane
pScroll = false;
return;
}
eScroll = true; // Enable the editor scroll
// Set elements to variables
let current = self.preview.get(0);
let other = self.edit.get(0);
// Calculate the position of scroll position based on percentage
let percentage = current.scrollTop / (current.scrollHeight - current.offsetHeight);
// Set the scroll position on the other pane
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
});