javascript - AngularJS -> 查询“在页面底部”

Question

问“是否还有更多要滚动的内容，或者我们是否已到达 Angular 中可滚动区域的底部？”的最佳方式是什么？

有一个带有固定底部导航栏的单页应用程序，并希望显示一个 ui 提示，指示有更多内容要显示，条件是不在页面末尾。认为有一种书签方式（哈希标签）可以做到这一点。

Answer 1

这是一种解决方案：我创建了绑定滚动事件的指令，如果可以向下滚动，则显示 div，在编译时附加：

app.directive('thereIsMore', function() {
  return {
    restrict: 'A',    
    scope: true,
    compile: function(tElement) {
      tElement.append('<div class="there-is-more" ng-show="bottom">There is more...</div>');
      return function(scope, element) {
        var elm = element[0];        
        var check = function() {
          scope.bottom = !(elm.offsetHeight + elm.scrollTop >= elm.scrollHeight);
        };
        element.bind('scroll', function() {
          scope.$apply(check);          
        });
        check();        
        }; // end of link 
    }    
  };
});

工作示例：http ://plnkr.co/edit/8W3E7BunpDxIkEPDqxzb?p=preview