自定义高度div中如何触发Angular infinite-scroll的scroll事件？

问题原因 #

ngx-infinite-scroll默认监听全局window的滚动事件。当给目标div设置固定高度并开启overflow-y: auto后，滚动行为仅在div内部发生，window未产生滚动，因此scrolled事件无法触发。

解决方案 #

在目标div上添加[scrollWindow]="false"属性，明确指令监听当前元素的滚动而非window：

修改后的comp.html #

<div class="sub_div"
    infinite-scroll
    [scrollWindow]="false"
    [infiniteScrollDistance]="2"
    [infiniteScrollThrottle]="1000"
    (scrolled)="onScrolls()"
    >
        <p *ngFor="let item of items" style="padding:25% 0">{{ item.name }}</p>
</div>

验证要点 #

• 保留.sub_div的CSS配置，确保内部可滚动：

.sub_div {
    overflow-y: auto;
    width: 400px;
    height: 500px; /* 也可使用百分比或vh单位，比如height: 90vh */
    background: lightblue;
}

• 若测试时仍未触发，可临时调小infiniteScrollDistance的值（比如改为0.5），确认事件是否正常响应，再根据需求调整回合适数值。

内容的提问来源于stack exchange，提问作者Tech Stack by Antra