1

我已经购买了一个 Angular 模板来构建一个 Web 应用程序，我正在努力让滚动事件处理程序使用 ngInfiniteScroll v1.2.0 触发（注意：如果我将 infinte-scoll-immediate-check 设置为 true，则处理程序会触发一次) . 我通过使用 jsFiddle 构建与模板附带的相同 div 结构和 CSS 来重现该问题：

jsFiddle 链接

由于模板，这是我必须在其中工作的结构：

<div ng-app='myApp' ng-controller='DemoController'>
<div class="app-content">
    <div class="box">
        <div class="box-row">
            <div class="box-cell">
                <div class="box-inner padding">
                    <div infinite-scroll=" loadMore() " infinite-scroll-distance="2 ">
                        <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是每个 div 使用的 CSS：

.padding {
    padding: 32px 32px;
}
.box .box-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.box .box-row .box-cell {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.box .box-row {
    display: table-row;
    height: 100%;
}
.box {
    display: table;
    width: 100%;
    height: 100%;
    border-spacing: 0;
    table-layout: fixed;
}
.app-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
}

如果我注释掉周围的五个 div，一切正常。我不是 CSS 专家，所以正在使用的这种“表格结构”给我带来了一些问题。任何帮助，将不胜感激！

4

0 回答 0