Question

我正在使用带有angularjs（angularjs.org）的ui-grid（ui-grid.info），我正在尝试同步两个网格的滚动条。如果用户在一个网格上移动滚动条，则其他网格应自动移动。

感谢。

Answer 1

我创建了一个指令并传入了网格的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); 
    }
 }]);

Answer 2

上面有很好的解决方案，谢谢。虽然我认为现在可能会贬值。（不确定，如果你知道，请确认）

这些变化对我有用：

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

更换＆＃39; .horizontal＆＃39; ＆＃39; .vertical＆＃39; for＆＃39; .ui-grid-viewport＆＃39;

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

2 个答案: