angularjs ng-repeat implement stick scroll

Question

I try to implement 'stick' scroll on dynamic content, my working example here. This working, but when append new items I see small 'flicker', this is based on timeout 0, but without this timeout example not working when try add new 50 items. Also I can't use virtual/custom scroll, like in ionic example. This is should be native html scroll.

Any thinks how to resolve this problem?

HTML:

<body ng-app="demoApp">
    <div ng-controller="TestCtrl">
        <div id="first">
            <list item-source="items" id="list"></list>
        </div>
        <div>
            Total: {{items.length}}
            <button type="button" ng-click="prepend(1);">Prepend (1)</button>
        </div>
    </div>
</body>

js:

(function(angular) {
    var app = angular.module('demoApp', []).controller('TestCtrl', function($scope) {
        $scope.items = [];
        $scope.count = 0;
        $scope.manualCount = 0;
        $scope.prepend = function(count){
            for(var i = 1; i <= count; i++){
                $scope.count++;
                $scope.items.unshift({
                    imageSrc: 'http://placehold.it/90x140&text='+$scope.count
                });
            }
        };
    }).directive('list', ['$timeout', function($timeout){
        return {
            restrict: "EA",
            transclude: false,
            replace: false,
            template: '<div id="list_wrapper"><div list-item ng-repeat="item in itemSource track by $index" class="item"><img ng-src="{{item.imageSrc}}"/></div></div>',
            scope: {
                itemSource: '='
            },
            compile: function(){
                return {
                    pre: function(scope, element, attrs, ctrl){
                        ctrl.setElement(element[0]);
                    }
                };
            },
            controller: function($scope){
                var element = '';
                $scope.linesCount = 0;
                var colcount = 3;
                this.setElement = function(el){
                    element = el;
                };
                this.addItem = function(item){
                    var newLinesCount = Math.ceil($scope.itemSource.length / colcount);
                    var linesInserted = newLinesCount - $scope.linesCount;
                    if(linesInserted > 0){
                        var prevScroll = element.scrollTop;
                        $timeout(function(){
                            var newScroll = prevScroll + (item.clientHeight * linesInserted);
                            element.scrollTop = newScroll;
                        }, 0);

                    }
                    $scope.linesCount = newLinesCount;
                };
            }
        };
    }]).directive('listItem', [function(){
        return {
            require: "^list",
            link: function(scope, element, attributes, listCtrl){
                listCtrl.addItem(element[0]);
            }
        };
    }]);

})(window.angular);

Community · Accepted Answer · 2017-05-23 11:43:42Z

1

Do replace $timeout with $scope.$evalAsync to do operations asynchronously behind the scene.

CODE

$scope.$evalAsync(function() {
    var newScroll = prevScroll + (item.clientHeight * linesInserted);
    element.scrollTop = newScroll;
});

Working Fiddle

For more explanation Refer This SO Answer, One more SO Answer Or This Link

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Mar 8, 2015 at 10:20

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moshe Shaham · Accepted Answer · 2015-03-08 10:50:56Z

0

Did you try this directive? I tried it in my project and it works well

answered Mar 8, 2015 at 10:50

Moshe Shaham

16.1k24 gold badges82 silver badges125 bronze badges

1 Comment

Vitall Over a year ago

No I didn't, nice directive will check it later. Right now answer by @pankajparkar is helped.

Collectives™ on Stack Overflow

angularjs ng-repeat implement stick scroll

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related