Question

我正在对ng-repeat进行无限滚动，使用loadMore（）函数更改limitTo值。

以下是代码：

指令（在jsfiddle上找到）：

angular.module('scroll', []).directive('whenScrolled', function() {
    return function(scope, elm, attr) {
        var raw = elm[0];

        elm.bind('scroll', function() {
            if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                scope.$apply(attr.whenScrolled);
            }
        });
    };
});

以下是控制器的代码：

var nb = 15;
$rootScope.vue = nb;
$rootScope.loadMore = function() {
    $rootScope.vue = $rootScope.vue + 5;
}

以下是html中的代码：

<div class="container-fluid" id="full-2">

    <div class="row" id="full-3">
        <div class="col-xs-12 col-md-10" id="fixed" when-scrolled="loadMore()">
            <ul>
                <li ng-repeat="pg in eleves0 | search:query:['millesime']:operator | orderBy:orderProp | limitTo:vue">

                [...]

                </li>
            </ul>
        </div>
    </div>

这里是css：

html, body{
    background-color:#ccc;
    height:100%;
}

#full{
    height:100%;
}

#full-1{
    height:90%;
}

#full-2{
    height:100%;
}

#full-3{
    height:100%;
}

#fixed{
    height:100%;
    overflow: auto;
}

此代码适用于IE，Firefox，Opera。当我向下滚动时，会出现新内容

Chrome无法全屏显示。它适用于Chrome，有时候，如果窗口的高度是＆lt; ~300-500像素（取决于计算机）

你知道它可能来自哪里吗？如何解决？

Answer 1

刚刚找到解决方案。改为：

#fixed{
height:100%;
overflow: scroll;

}

它有效

AngularJS无限滚动，不能仅使用chrome全屏

1 个答案: