Question

我已经看到并使用jQuery进行同步滚动，但对于我当前的项目，我被迫尽可能找到一个Angular解决方案。不幸的是，我没有运气找到＆＃34; Angular方式＆＃34;对于这个问题。

简单地说，我需要我的顶部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){
      ...
    });
  };
}]);

Answer 1

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

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

Answer 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中测试。

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

2 个答案: