Как синхронизировать вертикальную прокрутку между 2 вкладками разных экземпляров виджета jquery-ui-tab? - PullRequest
0 голосов
/ 04 апреля 2019

Обновление: проблема решена.См. Нижнюю часть поста.

Резюме: я использую два экземпляра 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 - решение, см. комментарий А. Вольфа на , почемуне делегирует работу для прокрутки? .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...