angularjs - UI-Grid 两个网格之间的同步滚动条

Question

我正在使用 ui-grid (ui-grid.info) 和 angularjs (angularjs.org)，我正在尝试同步两个网格的滚动条。如果用户在一个网格上移动滚动条，他的另一个网格应该自动移动。

谢谢。

Answer 1

上面的解决方案很好，谢谢。虽然我觉得现在可能贬值了。（不清楚，知道的请确认）

这些更改对我有用：

 var $gridToSync = $("#" + attrs['syncScroll']);
 var $target = $gridToSync.find('.ui-grid-viewport');
 var $source = element.find('.ui-grid-viewport');

将 '.horizo​​ntal' '.vertical' 换成 '.ui-grid-viewport'

Answer 2

我创建了一个指令并传入我希望滚动同步的网格的 ID：

data-sync-scroll="displayGrid"

如果有更好的方法来做到这一点，请告诉我。

 angular.module('app').directive('syncScroll', [function() {
    var directive = {
        link: link
    }
    return directive;
    function link(scope, element, attrs) {
        setTimeout(function() {
            var $gridToSync = $("#" + attrs['syncScroll']);
            var $horizontalScrollToSync = $gridToSync.find('.horizontal');
            var $verticalScrollToSync = $gridToSync.find('.vertical');

            var $horizontalScroll = element.find('.horizontal');
            var $verticalScroll = element.find('.vertical');

            //Bind scroll Events
            $horizontalScroll.scroll(function () {
                $horizontalScrollToSync.scrollLeft($(this).scrollLeft()); 
            });
            $verticalScroll.scroll(function() {
                $verticalScrollToSync.scrollTop($(this).scrollTop());
            }); 
        }, 300); 
    }
 }]);