Question

更新：问题已解决。请参阅文章底部。

摘要：我在一页上使用两个jquery-ui-tabs实例，以允许比较两个文本。为此，我想提供一个同步的垂直滚动模式：滚动一个选项卡（在左侧的窗口中）触发相同的滚动，而在另一个选项卡中（在右侧的窗口小部件中，则相反）。内容通过ajax加载。它不起作用，不会产生任何错误。

背景：首先，我构建了一个没有jquery-ui的测试版本：可以将页面上的两个div一起滚动。这部分代码有效（Artem Kachanovskyi的原始著作，How do I synchronize the scroll position of two divs?）。其次，我尝试使用两个jquery-ui-widgets在页面上标识正确的div：使用两个活动选项卡（选项：active）和一个自定义css类（分配给所有tab-div）来查找它们。使用Alert-popups进行测试表明，为滚动代码选择了正确的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 {}
};

用于同步滚动和标识正确的tab-div的代码似乎有效。但是同步滚动不是。

更新：问题已解决。滚动事件不会在整个DOM中冒泡，这就是为什么无法使用jquery的滚动方法或简单的onscroll-event来委派有关动态元素的滚动工作的原因，这意味着在我遇到问题时：滚动在jquery-ui-tabs-widget中加载了Ajax的div不会触发滚动事件。

使用addEventListener方法的解决方法是一种解决方案，请参阅A. Wolff在why doesn't delegate work for scroll?的评论。

如何在jquery-ui-tab小部件的不同实例的2个选项卡之间同步垂直滚动？

0 个答案: