0
Scrollbar Funktionalität, die mehr Daten auf Scrollen nach oben
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>hallo i Scrollbar für skype wie Anwendung entwickle laden soll, die die Daten onscrolling nach oben wird geladen, aber die Bildlaufleiste kommt nicht nach unten Sobald es den oberen Rand automatisch berührt, werden die nächsten Daten erfolgreich geladen.
hier ist mein Plunker Link 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>
Ihr Code-Schnipsel wirft Fehler. – Justinas
So viel Code so wenig Problem Beschreibung –
@Justinas hier ist meine Plunker Link https://plnkr.co/edit/NobKGyNnpLZHnoHAX824?p=preview könnte es –