Question

我尝试在动态内容上实现'stick'滚动，我的工作示例here。这工作，但当附加新项目，我看到小'闪烁'，这是基于超时0，但没有这个超时示例不起作用时尝试添加新的50项。此外，我不能使用虚拟/自定义滚动，如离子example。这应该是原生的html滚动。

有人想过如何解决这个问题？

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

Answer 1

用$timeout替换$scope.$evalAsync以在场景后异步执行操作。

<强> CODE

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

Working Fiddle

有关详细解释Refer This SO Answer，One more SO Answer或This Link

Answer 2

你试过this directive吗？我在我的项目中尝试了它并且运行良好

angularjs ng-repeat实施棒滚动

2 个答案: