бесконечная прокрутка сверху (назад) в AngularJS
Я пытаюсь сделать обратный бесконечный свиток. У меня есть список комментариев, где я получаю последние 10 последних комментариев и хочу, чтобы пользователь мог прокручиватьвверх получить следующие 10 - аналогично FB, где отображаются последние комментарии со ссылкой «получить предыдущий», но с помощью события прокрутки, а не ссылки.
Я начал сhttp://jsfiddle.net/vojtajina/U7Bz9/ и попытался изменить его до обратной бесконечной прокрутки, и довольно быстро получилось что-то вроде этого:
function Main($scope, $timeout) {
$scope.items = [];
var counter = 0;
$scope.loadMore = function() {
// simulate an ajax request
$timeout( function() {
for (var i = 0; i < 5; i++) {
$scope.items.unshift({id: counter});
counter += 10;
}}, 1000);
};
$scope.loadMore();
}
angular.module('scroll', []).directive('whenScrolled', ['$timeout', function($timeout) {
return function(scope, elm, attr) {
var raw = elm[0];
$timeout(function() {
raw.scrollTop = raw.scrollHeight;
}, 1100);
elm.bind('scroll', function() {
// note: if test for < 100 get into infinite loop due to
// the delayed render
if (raw.scrollTop === 0) {
var sh = raw.scrollHeight
scope.$apply(attr.whenScrolled);
// the items are not loaded and rendered yet, so
// this math doesn't work
raw.scrollTop = raw.scrollHeight - sh;
}
});
};
}]);
http://jsfiddle.net/digger69/FwWqb/2/
Проблема заключается в том, что при получении следующих 10 элементов они добавляются в начало списка, и весь список повторно отображается, а элемент, находившийся в списке, полностью прокручивается из поля зрения. В скрипте пункт «40» находится вверху, а когда вы прокручиваете (немного вниз), а затем вверх, чтобы вызвать прокрутку, элемент «90» находится вверху. Я ищу хорошую стратегию, чтобы держать "40" в верхней части области прокрутки после того, как он рендерится.
Примечание: в скрипте я смог заставить его работать, сохранив верхний li в событии прокрутки и вызвав scrollIntoView ()до Я добавил время ожидания для имитации вызова AJAX. По истечении времени ожидания верхний li прокручивается в поле зрения до того, как запрос возвращается, и новые элементы отображаются: /
var top = elm.find("li")[0];
scope.$apply(attr.whenScrolled);
top.scrollIntoView();