CODEWITHSUNDEEP
javascripthtmlcssangularjs
Vitall
Vitall

Reputation: 1211

angularjs ng-repeat implement stick scroll

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);

Upvotes: 2

Views: 731

Answers (2)

Moshe Shaham
Moshe Shaham

Reputation: 15974

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

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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

Upvotes: 1

Related Questions