如何使用 AngularJS 同步两个 div 的滚动位置？答案

【问题标题】：How do I synchronize the scroll position of two divs using AngularJS?如何使用 AngularJS 同步两个 div 的滚动位置？
【发布时间】：2015-10-27 18:00:38
【问题描述】：

我已经看到并使用 jQuery 进行同步滚动，但是对于我当前的项目，我不得不尽可能地寻找 Angular 解决方案。不幸的是，我没有找到解决这个问题的“角度方式”。

简单地说，我需要顶部 div（表格标题）与底部 div（表格主体）同步水平滚动。这两个 div 是包装 div 的子级。第一个孩子是奴隶，第二个是主人，但我不确定将奴隶位置链接到主人位置的函数是什么......

.directive('scroll', [function() {
return {
  link: function(scope, element, attrs) {
    ch = elem.children();
    slave = ch[0]; 
    master= ch[1];

    slave.bind('scroll', function(event){
      ...
    });
  };
}]);

【问题讨论】：

标签： angularjs angularjs-directive scroll

【解决方案1】：

Here 是我的例子。它最初是为了将两个大小相同的元素组合在一起的垂直滚动而编写的，这些元素位于页面上的不同块中。我已经为水平滚动重写了它。

但它需要元素具有相同的宽度。它使卷轴同步——它们同时是主从。如果您的元素大小不同，您可以使用比例设置滚动，例如el.scrollLeft = scrollLeft*(el.width/otherEl.width)。

【讨论】：

谢谢！我将一些 lorem ipsum 放入内容 div 中，并将顶部溢出切换为隐藏，以查看滚动操作。它似乎可以满足我的需要。当我把它应用到我的桌子上时，我确实注意到了一点点延迟，这是我在小提琴中没有看到的。有解决办法吗？
它在 FF 中不起作用，因为 isSameNode 功能已被删除。 isEqualNode 是正确的 fn：jsfiddle.net/0w6n736q

【解决方案2】：

我的例子（需要https://github.com/jquery/jquery-mousewheel）：

myApp.directive("scrollGroup", function () {
    return function(scope, element, attrs) {
        element.bind("mousewheel", function(e) {
            e.preventDefault();

            $("[scroll-group='" + attrs.scrollGroup + "']").each(function () {
                $(this).scrollTop($(this).scrollTop() - e.deltaY);
                $(this).scrollLeft($(this).scrollLeft() + e.deltaX);
            });
        });        
    };
});

然后您可以执行以下操作：

<div class='div1' scroll-group='scroll_grp1'></div>
<div class='div2' scroll-group='scroll_grp1'></div>
<div class='div3' scroll-group='scroll_grp1'></div>
...

当为 div 设置 css overflow: hidden 时，它甚至可以工作。这很重要，因为我不想在所有 div 中都看到滚动条。

在 Firefox、Chrome 和 Safari 8 中测试。

【讨论】：