javascript - Angular 无限滚动 : scroll bar on body not on div

标签 javascript html css angularjs infinite-scroll

我使用 angularjs 在我的网络应用程序中实现无限滚动。我在网上找到了这个有用的指令 Infinite Scroll , 但问题是这只能在 div 内部实现,不能在滚动条主体中实现:

app.directive('infinityscroll', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.bind('scroll', function () {
                if ((element[0].scrollTop + element[0].offsetHeight) == element[0].scrollHeight) {
                    //scroll reach to end
                    scope.$apply(attrs.infinityscroll)
                }
            });
        }
    }
});

这是我的html代码:

<div infinityscroll="NextPage()" style="height:700px; overflow:auto;" >
  <div ng-repeat="item  in listItems">
       <img ng-src="{{item.picture}}" alt="broken" style="">
  </div>
</div>

当我删除内联 css 时,它将不起作用。那么我如何才能更改正文中的无限滚动而不是 div?

最佳答案

试试这个: <body infinityscroll="NextPage()" style="height: 1000px; overflow:auto;"> 并从您的 div 中删除无限滚动初始化。

您可能需要根据屏幕尺寸稍微调整一下高度。 希望这能解决您的问题.. :)

关于javascript - Angular 无限滚动 : scroll bar on body not on div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37453982/

相关文章:

javascript - Three.js Ray忽略透明像素

javascript - React useEffect 清理函数运行多次?

html - 如何改变垫子分隔线的颜色?

javascript - 使用 JSON 作为 WCF Restservice 方法的参数

javascript - 使用脚本制作点击功能动画

html - float :left being thrown off by varying size divs

javascript - Handlebars helper 比较两个数组并返回差异

html - 如何动画一个已经存在的技能栏

css - 嵌套的垂直边距折叠如何工作?

JavaScript 更改元素类型