Overflow-scroll doesn't update view scroll when adding new items to list with ng-repeat

1

overflow-scroll doesn’t update view scroll when adding new items to list with ng-repeat :

okay I currently developing app that receive list of objects from web service and it loads fine in an ion list , the question is when i try to apply native scrolling - due to performance - and want to implement “load more” button in the footer to call API in the web service and add new list items to the current list , all of this done and i see new items but i can’t scroll down to the end of the list , just can scroll to the last old item in the list - page can’t sense the new items although the are appeared . when I rotate the screen (portrait-landscape) it works fine !! and i can scroll , I need to rotate the mobile for making scroll run each load more button is clicked which is strange scenario , any suggestion would be great.

2

When you add items to a list, you need to update the scroller.

Like this :

$ionicScrollDelegate.resize()

1 Like
3

thanks for your response , I tried what you suggest but nothing changed :frowning:
any help would be great!!
here is my function to load more data :

    $scope.loadMoreData = function () {
    if ($scope.loadMore) {
        var productid = $scope.lastestnews[$scope.lastestnews.length - 1].ProductId;
        oldloadednewsservice.query({ 'editionid': $scope.GetUserEdition, 'categoryid': $scope.categoryId, 'productid': productid })
            .$promise.then(function (oldloadednews) {
                var oldreturnednews = oldloadednews;
                if (oldreturnednews == null) {
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                    $scope.hasNext = false;
                    $ionicScrollDelegate.resize();
                } else {
                    $scope.lastestnews = $scope.lastestnews.concat(oldreturnednews);
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                    var hasNext = $scope.lastestnews[$scope.lastestnews.length - 1].hasNext;
                    $scope.hasNext = hasNext;
                    $ionicScrollDelegate.resize();
                }
            });
    };
};
4

It’d be best if you setup a CodePen sample. Nothing too complete but just enough to show the problem. You can even use fake data.

Why using overflow-scroll?

5

I have exactly the same problem. The reason why I need to use overflow-scroll is the major performance improvement.
When I leave the view and enter it again, scrolling works without any problems. But when I add new items again, the list is not resized properly and therefore scrolling does not work anymore.

EDIT:

When I add overflow-y: scroll to div.scroll then the scrolling works, but unfortunately the infinite loader is loading until there are no more items left (not waiting for user to scroll to bottom). Also it seems that the performance is also worse.

6

I’d suggest you don’t use overflow and instead let Ionic handle that. Then, when you add items to the list, use $ionicScrollDelegate.resize() to update the scroll view.

7

Very strange. Now this bug does not occur again even when I re-build the app. The only thing I’ve changed was that I reduced the overall number of html elements in the list for faster rendering. It seems that this also fixed the list resizing.