Question

我正在尝试使用https://github.com/sroze/ngInfiniteScroll/tree/1.0.0中的nginfiniteScroll。我能够阅读所有内容，但我在触发滚动时遇到了一些问题。当我为滚动框创建一个容器时，无限滚动工作正常。但是当我从容器中取出它时，只是使用一个身体我不会看到它能够滚动。我创建了一个我的代码的plunkr，但它似乎在plunkr中工作得很好，这让我很困惑。

在我自己的代码中我有类似的东西

<style>#list-wrapper{
max-height: 400px;
overflow-y: scroll;

margin-top: 20px;
border: solid 1px black;
 }

 h4{
padding: 20px;
 }</style>

<div class="panel-content" data-ng-controller="DashboardCtrl">

<div>
    <div class="list" infinite-scroll='loadMore()'
         infinite-scroll-distance='2'>
        <div class="header">
        </div>
        <div class="list-table">
            <table class="table">
                <tbody>
                    <tr ng-repeat="item in infiniteList">
                        <td style="width:100%">
                            <div>{{item}}</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style='clear: both;'></div>
    </div>
</div>

<h4>{{scrollTriggered}}</h4>
</div>

和我的剧本

 .controller("DashboardCtrl", ["$scope",
function ($scope) {

$scope.infiniteList = [];
$scope.incr = 1;

$scope.scrollTriggered = "";

$scope.loadMore = function () {

    $scope.scrollTriggered += "\n Scroll Triggered"
    for (var i = 0; i < 30; i++) {
        $scope.infiniteList.push("Item " + $scope.incr);
        $scope.incr += 1;
    }
};
 }
 ])

最终看起来如此并且不会触发我的plunkr中显示的滚动功能。

http://plnkr.co/edit/c29ZcoofTqgPXoRpmFbk?p=preview

非常感谢任何帮助

Answer 1

所以这显然是一个奇怪的答案，因为它真的没有让我想到。因为我有一个整页的谷歌地图，我使用了

的.html标签

.html{
height 100%;
}

这会导致一些错误，因为它会触发滚动。因此我根本无法滚动。删除高度限制允许它滚动。

ngInfiniteScroll滚动不触发

1 个答案: