Shr*_*uti 3 angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angular-ui-router
你可以告诉我当用户滚动到顶部时如何获取事件.实际上我在我的例子中使用ng-repeat.我想在用户滚动到底部并滚动到顶部时获取事件.我有一个div我在其中使用ng -repeat可以在滚动后用户移动到顶部时获得顶级事件.实际上我需要在用户滚动到角度的div底部和顶部时显示警告.这是我的代码
<body ng-controller="MyController">
<div style="width:90%;height:150px;border:1px solid red;overflow:auto">
<div ng-repeat="n in name">{{n.name}}</div>
</div>
您可以将指令放在可滚动的div上,以监听scroll事件并检查是否达到了顶部或底部.
所以,使用你的HTML,你的div看起来像这样:
<div exec-on-scroll-to-top="ctrl.handleScrollToTop"
exec-on-scroll-to-bottom="ctrl.handleScrollToBottom"
style="width:90%;height:150px;border:1px solid red;overflow:auto">
<div ng-repeat="n in name">{{n.name}}</div>
</div>
随着新的指令exec-on-scroll-to-top和exec-on-scroll-to-bottom添加.每个指定控制器中的一个函数,该函数应在指令检查的特定事件发生时执行.
exec-on-scroll-to-top看起来像这样,只是检查可滚动div的scrollTop属性是0:
myapp.directive('execOnScrollToTop', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var fn = scope.$eval(attrs.execOnScrollToTop);
element.on('scroll', function (e) {
if (!e.target.scrollTop) {
console.log("scrolled to top...");
scope.$apply(fn);
}
});
}
};
});
而且exec-on-scroll-to-bottom应该是这样的(记住,一个元素完全滚动时,它的(scrollHeight - scrollTop) === clientHeight):
myapp.directive('execOnScrollToBottom', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var fn = scope.$eval(attrs.execOnScrollToBottom),
clientHeight = element[0].clientHeight;
element.on('scroll', function (e) {
var el = e.target;
if ((el.scrollHeight - el.scrollTop) === clientHeight) { // fully scrolled
console.log("scrolled to bottom...");
scope.$apply(fn);
}
});
}
};
});
这是一个插件.滚动到达顶部或底部时,打开控制台以查看记录的消息.
| 归档时间： |
|
| 查看次数： |
5063 次 |
| 最近记录： |