angularjs ui-grid滚动条到达末尾时如何获取事件答案

【问题标题】：How can I get an event when angularjs ui-grid scroll bar reaches the endangularjs ui-grid滚动条到达末尾时如何获取事件
【发布时间】：2016-05-15 05:41:36
【问题描述】：

我想在 angular ui grid v3 中滚动条到达结果末尾时显示一个按钮。

我当时的想法是使用指令在滚动上附加一个事件，但 ui 网格本身就是一个指令，我无法获得它的滚动长度和高度，因为当时没有加载数据。

如果有人能给我关于如何解决这个问题的提示，我将不胜感激。谢谢

【问题讨论】：

你使用infiniteScroll吗？
不，我没有使用无限滚动

标签： angularjs angular-ui-grid

【解决方案1】：

这不是完整的解决方案，但它可能会帮助您入门。

我附加到 scrollEnd 事件并能够检查 y 位置。我还没有找到计算视口底部的方法，这就是为什么我只是在那里放了一个任意的 2000 值。

您可以检查 https://github.com/angular-ui/ui-grid/blob/a42dab24532fb896725b9fc8359e4526e436c891/src/js/core/factories/Grid.js 中的 scrollToIfNecessary 计算网格的实际高度。这绝对不是简单的计算。

http://plnkr.co/edit/hluhWCZz05WB0Itdumbf?p=preview

   gridApi.core.on.scrollEnd($scope,function(row){

        if( row.newScrollTop > 2000) alert('far down south');

      });

【讨论】：

【解决方案2】：

以下内容可让您检测用户是否一直滚动到网格的右侧和/或底部。只需插入必要的处理程序。您可以通过将其包装在指令中来实现它，然后利用本机滚动事件。

请注意，我不是 JQuery 专家，所以肯定有比重复选择器更好的方法。

angular.module('myGridApp')
  .directive('myGrid', function($timeout) {
    return {
      restrict: 'E',
      scope: { data: '=' },
      template: "<div><ui-grid></ui-grid></div>",
      link: function($scope, $element, $attributes) {

        $timeout(function() {
          var maxHorizontalScroll = $('div.ui-grid-viewport')[0].scrollWidth - $('div.ui-grid-viewport')[0].clientWidth;
          var maxVerticalScroll = $('div.ui-grid-viewport')[0].scrollHeight - $('div.ui-grid-viewport')[0].clientHeight;
          $('div.ui-grid-viewport').on('scroll', function(par, arg) {
            var currentHorizontalScroll = $('div.ui-grid-viewport').scrollLeft();
            var currentVerticalScroll = $('div.ui-grid-viewport').scrollTop();

            if(currentHorizontalScroll >= maxHorizontalScroll) {
              // User has scrolled as far to the right as possible
            }

            if(currentVerticalScroll >= maxVerticalScroll) {
              // User has scrolled as far to the bottom as possible
            }
          });
        });
      }
    };
  });

【讨论】：