javascript ngInfiniteScroll 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34004914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ngInfiniteScroll not working
提问by Shyamal Parikh
I am trying to make ngInfiniteScroll work but in vain - Plunker. Scroll event is only triggered on page load, after that nothing seems to trigger it. Can anyone please shed some light.
我试图让 ngInfiniteScroll 工作但徒劳无功 - Plunker。滚动事件仅在页面加载时触发，之后似乎没有任何内容触发它。任何人都可以请说明一下。
I tried various combinations, none worked:
我尝试了各种组合，都没有奏效：
infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-container="'#list-wrapper'"
infinite-scroll='loadMore()' infinite-scroll-distance='2' infinite-scroll-parent
infinite-scroll='loadMore()' infinite-scroll-distance='2'
HTML:
HTML：
<body ng-app="app" ng-controller="listController">
<div id="list-wrapper">
<div class="list" infinite-scroll='loadMore()'
infinite-scroll-distance='2'
infinite-scroll-container="'#list-wrapper'">
<div class="header">
</div>
<div class="list-table" >
<table class="table">
<tbody>
<tr ng-repeat="item in infiniteList">
<td style="width:100%">
<div>{{item}}</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style='clear: both;'></div>
</div>
</div>
JS:
JS：
var app = angular.module("app", ['infinite-scroll']);
app.controller('listController', ['$scope','$http', function ($scope,$http) {
$scope.infiniteList = [];
$scope.incr = 1;
$scope.loadMore = function(){
console.log("scroll");
for(var i = 0; i< 30; i++){
$scope.infiniteList.push("Item " + $scope.incr);
$scope.incr +=1;
}
};
}]);
回答by gaurav5430
EDIT: you are using the latest stable version of ngInfinite Scroll, which does not have the -container and -parent methods, i have update the plunker with the develpoment ngInfiniteScroll.js, now you can see the working code here:
编辑：您使用的是 ngInfinite Scroll 的最新稳定版本，它没有 -container 和 -parent 方法，我已经用开发 ngInfiniteScroll.js 更新了 plunker，现在您可以在这里看到工作代码：
http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview
http://plnkr.co/edit/Bs9RYXhSAPhmQG5M6pyg?p=preview
OLD:
老的：
ngInfiniteScroll will call myPagingFunction() any time the bottom of the element approaches the bottom of the browser window
ngInfiniteScroll 将在元素底部接近浏览器窗口底部时调用 myPagingFunction()
so, if you change your css and remove the max-height, so that the list covers the page,you will see that the infinitescroll is working when user scrolls past the page.
因此，如果您更改 css 并删除最大高度，以便列表覆盖页面，您将看到当用户滚动页面时无限滚动正在工作。
#list-wrapper{
//max-height: 400px;
overflow-y: scroll;
margin-top: 20px;
border: solid 1px black;
}
http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview
http://plnkr.co/edit/aaUWnnKoH9kXGFx70U2J?p=preview
also see: angularjs infinite scroll in a container
另请参阅：容器中的 angularjs 无限滚动
回答by Mahendra
Check your MAIN HTML or body tag. They might be containing some overflow css. So the page scroll must be the wrapper in that case.
检查您的 MAIN HTML 或 body 标签。它们可能包含一些溢出的 css。因此，在这种情况下，页面滚动必须是包装器。
body {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
and
和
<div infinite-scroll='getMoreListingData()' infinite-scroll-disabled='isbusy'
infinite-scroll-distance='0'
infinite-scroll-container="'body'">
This saved my day.
这挽救了我的一天。
回答by tottomotto
You can checkout the 1.3.0 version, which performs a check for "infinite-scroll-parent".
您可以查看 1.3.0 版本，它会检查“infinite-scroll-parent”。
If you are using bower: bower install --save ngInfiniteScroll#1.3.0
如果您使用凉亭：bower install --save ngInfiniteScroll#1.3.0
<div class="scroll-container"> <!-- Fixed height is OK -->
<div infinite-scroll="vm.notifications.loadMore()" infinite-scroll-distance='1' infinite-scroll-immediate-check='true' infinite-scroll-parent="true">
