Javascript 在AngularJS中使用ngInfiniteScroll指令实现反向无限滚动
我想在此使用Javascript 在AngularJS中使用ngInfiniteScroll指令实现反向无限滚动,javascript,angularjs,Javascript,Angularjs,我想在此使用ngInfiniteScroll指令：在我的angular js应用程序中实现一个反向无限滚动（就像在聊天小部件中一样）。然而，本指令的文件似乎没有提及如何实现这一点。它只记录了如何实现标准的无限滚动。有人能在这方面指导我吗？谢谢 另外：我很喜欢使用这个指令，因为它处理DOM控件；angular的标准无限滚动指令在我滚动时不断创建DOM元素，而我的滚动从未被删除 我认为您应该采用基于模型的方法（特别适合角度） ie当您向上滚动并达到某个限制时，您将加载更多数据并将其插入到消息集合的开
ngInfiniteScroll另外：我很喜欢使用这个指令，因为它处理DOM控件；angular的标准无限滚动指令在我滚动时不断创建DOM元素，而我的滚动从未被删除 我认为您应该采用基于模型的方法（特别适合角度） ie当您向上滚动并达到某个限制时，您将加载更多数据并将其插入到消息集合的开头（如果出于性能原因，您想限制加载的html节点数量，也可以删除最新的数据） 这就是我所使用的方法 根本没有dom操作，它只检测您何时向下滚动并到达底部（使用去盎司）并触发已绑定的处理程序，以便您可以做任何您想做的事情，特别是更改您的模型：您的应用程序保持模型驱动 我已经稍微改变了逻辑，使其具有向上滚动的行为，但想法保持不变
(function (ng) {
'use strict';
var module = ng.module('lrInfiniteScroll', []);
module.directive('lrInfiniteScroll', ['$timeout', function (timeout) {
return{
link: function (scope, element, attr) {
var
lengthThreshold = attr.scrollThreshold || 50,
timeThreshold = attr.timeThreshold || 400,
handler = scope.$eval(attr.lrInfiniteScroll),
promise = null,
lastScrolled = -9999;
lengthThreshold = parseInt(lengthThreshold, 10);
timeThreshold = parseInt(timeThreshold, 10);
if (!handler || !ng.isFunction(handler)) {
handler = ng.noop;
}
element.bind('scroll', function () {
var scrolled = element[0].scrollTop;
//if we have reached the threshold and we scroll up
if (scrolled < lengthThreshold && (scrolled - lastScrolled) < 0) {
//if there is already a timer running which has no expired yet we have to cancel it and restart the timer
if (promise !== null) {
timeout.cancel(promise);
}
promise = timeout(function () {
handler();
//scroll a bit againg
element[0].scrollTop=element[0].clientHeight/2;
promise = null;
}, timeThreshold);
}
lastScrolled = scrolled;
});
//scroll first to the bottom (with a delay so the elements are rendered)
timeout(function(){
element[0].scrollTop=element[0].clientHeight;
},0);
}
};
}]);
})(angular);
（功能（ng）{
"严格使用",；
变量模块=ng.模块（'lrInfiniteScroll'，[]）；
module.directive（'lrInfiniteScroll'，['$timeout'，函数（超时）{
返回{
链接：功能（范围、元素、属性）{
变量
lengthThreshold=attr.scrollThreshold | | 50，
timeThreshold=attr.timeThreshold | | 400，
handler=范围$eval（属性lr.infinitescroll），
承诺=无效，
lastScrolled=-9999；
lengthThreshold=parseInt（lengthThreshold，10）；
timeThreshold=parseInt（timeThreshold，10）；
if（！handler | |！ng.isFunction（handler））{
handler=ng.noop；
}
元素绑定（'scroll'，函数（）{
var scrolled=元素[0]。scrollTop；
//如果我们已达到阈值并向上滚动
如果（滚动<body ng-app="myApp" ng-controller="mainCtrl">
<div z-infinite-scroll="loadOlder" inverse="false" body-scroll="true">
<div smooth-scroll scroll-if="{{$last}}" duration="0" ng-repeat="obj in messages">
{{obj.message}}
</div>
</div>
</body>
{{obj.message}
它将在10秒后收到消息，如果您滚动到顶部，历史记录将被加载。请查看我的回答，看看这是否对您有帮助：听起来您想要的是更多的“虚拟滚动”我已经在回答中概述了这一点。看起来该指令只支持滚动到屏幕底部（检查源代码）。您可以重写它以支持滚动到窗口顶部。此外，您可以在此处找到一些想法：