两个网格之间的UI网格同步滚动条 [英] UI-Grid sync scroll bar between two grids

问题描述

我使用的UI网（ui-grid.info）与angularjs（angularjs.org），我试图同步两格的滚动条。如果用户在一个网格，他的其他网应自动移动移动滚动条。

I am using ui-grid (ui-grid.info) with angularjs (angularjs.org) and i am trying to sync the scroll bar of two grid. If the user move the scroll bar on one grid he other grid should automatic move.

感谢。

推荐答案

我创建了一个指令，并传入我想滚动同步电网的id：

I create a directive and pass in the id of the grid i want the scroll to sync:

data-sync-scroll="displayGrid"

如果有更好的方法来做到这一点，请让我知道。

If there is a better way to do this please let me know.

 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); 
    }
 }]);

这篇关于两个网格之间的UI网格同步滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！