Обновление: проблема решена.См. Нижнюю часть поста.
Резюме: я использую два экземпляра jquery-ui-tabs на одной странице, чтобы позволить сравнение двух текстов.Для этой цели я хочу предложить синхронизированный режим вертикальной прокрутки: прокрутка одной вкладки (в левой части поля) запускает ту же прокрутку в другой (в правом виджете - наоборот).Контент загружается через ajax.Это не работает без каких-либо ошибок.
Справочная информация: Сначала я создал тестовую версию без jquery-ui: два элемента div на странице можно прокручивать вместе.Эта часть кода работает (оригинал Артема Качановского, Как мне синхронизировать положение прокрутки двух делителей? ).Во-вторых, я попытался определить правильные элементы div на странице с помощью двух jquery-ui-виджетов: для их поиска используются две активные вкладки (опция: active) и пользовательский класс css (назначенный всем tab-div).Тестирование с всплывающими окнами оповещения показывает, что для кода прокрутки выбраны правильные деления.
Код: Javascript, jQuery и jQuery UI.tabsL
и tabsR
являются именами двух экземпляров..tabsdiv
- это упомянутый пользовательский класс для выбора только tab-div-ов виджетов.
function getActiveTabsForSyncScroll(){
var numl = tabsL.tabs( "option", "active" );
var numr = tabsR.tabs( "option", "active" );
leftDivId = $("#tabsL div.tabsdiv")[numl].id;
rightDivId = $("#tabsR div.tabsdiv")[numr].id;
leftDiv = document.getElementById(leftDivId);
rightDiv = document.getElementById(rightDivId);
}
Код прокрутки, где #syncscrolltoggle
- это флажок, который контролирует, является ли прокрутка синхронизациейактивировано:
var isSyncingLeftScroll = false;
var isSyncingRightScroll = false;
var syncScroll = document.getElementById('syncscrolltoggle');
getActiveTabsForSyncScroll();
$("#syncscrolltoggle").click(function(){
getActiveTabsForSyncScroll();
});
leftDiv.onscroll = function() {
if (syncScroll.checked == true) {
if (!isSyncingLeftScroll) {
isSyncingRightScroll = true;
rightDiv.scrollTop = this.scrollTop;
}
isSyncingLeftScroll = false;
}
else {}
};
rightDiv.onscroll = function() {
if (syncScroll.checked == true) {
if (!isSyncingRightScroll) {
isSyncingLeftScroll = true;
leftDiv.scrollTop = this.scrollTop;
}
isSyncingRightScroll = false;
}
else {}
};
Код для синхронизации с прокруткой и определения правильных разделителей табуляции, кажется, работает.Но синхронизация с прокруткой отсутствует.
Обновление: Проблема решена.Событие scroll не распространяется через DOM, поэтому метод jroll или простой onscroll-метод scroll нельзя использовать для делегирования работы для прокрутки динамического элемента, что означает в случае моей проблемы: прокруткаЗагруженные ajax div-ы в виджете jquery-ui-tabs-widget не запускают событие прокрутки.
Обходной путь с помощью метода addEventListener - решение, см. комментарий А. Вольфа на , почемуне делегирует работу для прокрутки? .