0
var app=angular.module('scroll', ['angular-scroll-complete']).controller("Main",Main)
//app.js
function Main($scope) {
$scope.items = [];
var counter = 0;
var scrollingTop=document.getElementById("fixed");
//alert("controller"+scrollingTop.offsetHeight)
scrollingTop.scrollTop=scrollingTop.scrollHeight
console.log("hi==="+scrollingTop.scrollHeight)
$scope.loadMore = function() {
for (var i = 0; i < 5; i++) {
$scope.items.push({id: counter});
counter += 10;
}
};
$scope.loadMore();
}
//angular-scroll-complete.js
var app=angular.module('scroll', ['angular-scroll-complete']).controller("Main",Main)
function Main($scope) {
$scope.items = [];
var counter = 0;
var scrollingTop=document.getElementById("fixed");
//alert("controller"+scrollingTop.offsetHeight)
scrollingTop.scrollTop=scrollingTop.scrollHeight
console.log("hi==="+scrollingTop.scrollHeight)
$scope.loadMore = function() {
for (var i = 0; i < 5; i++) {
$scope.items.push({id: counter});
counter += 10;
}
};
$scope.loadMore();
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>AngularJS: Infinite Scrolling </title>
<script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="app.js"></script>
<script src="angular-scroll-complete.js"></script>
<style type="text/css">
li {
height: 120px;
border-bottom: 1px solid gray;
}
#fixed {
height: 400px;
overflow: auto;
}
</style>
</head>
<body ng-app="scroll" ng-controller="Main">
<div id="fixed" when-scrolled="loadMore()" >
<ul>
<li ng-repeat="i in items | orderBy:'id':true ">{{i.id}}</li>
</ul>
</div>
</body>
</html>更多的數據滾動條功能，您好我正在開發的滾動條對於像應用程序，它加載數據onscrolling到頂部，但滾動條不下來的Skype一旦它自動觸摸頂部，但下一個數據成功加載。
這裏是經過API返回的數據我plunker鏈接https://plnkr.co/edit/NobKGyNnpLZHnoHAX824?p=preview
angular.module('angular-scroll-complete', []).directive('whenScrolled', function() {
return {
link: {
pre: function(scope,elem,attr){
var raw = elem[0];
var oldscrollHeight=[];
var scrollTop;
elem.bind('scroll', function() {
if (Math.round(raw.scrollTop) ==0) {
console.log("raw.scrollTop="+Math.round(raw.scrollTop) +" "+ "raw.offsetHeight=="+raw.offsetHeight +" "+"raw.scrollHeight=="+raw.scrollHeight+"oldscrollHeight=="+oldscrollHeight)
scope.$apply(attr.whenScrolled);
}
});
},
post: function(scope,elem,attr){
scope.$watch(function() {
return elem[0].value;
},
function (e) {
elem[0].scrollTop = elem[0].scrollHeight;
});
}
}
};
});<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>AngularJS: Infinite Scrolling </title>
<script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="app.js"></script>
<script src="angular-scroll-complete.js"></script>
<style type="text/css">
li {
height: 120px;
border-bottom: 1px solid gray;
}
#fixed {
height: 400px;
overflow: auto;
}
</style>
</head>
<body ng-app="scroll" ng-controller="Main">
<div id="fixed" when-scrolled="loadMore()" >
<ul>
<li ng-repeat="i in items | orderBy:'id':true ">{{i.id}}</li>
</ul>
</div>
</body>
</html>
您的代碼片段會引發錯誤。 – Justinas
這麼多代碼這麼少問題描述 –
@Justinas這裏是我的plunker鏈接https://plnkr.co/edit/NobKGyNnpLZHnoHAX824?p=preview可以看看它 –