Angular 4使用ngx-infinite-scroll实现滚动加载异常问题咨询

看起来你遇到了ngx-infinite-scroll还没到页面底部，滚动到中间位置就触发onScrollDown()的问题，我来帮你梳理下常见的排查方向和解决办法：

1. 检查infiniteScrollDistance参数的设置 #

这个参数的含义是距离底部的视口高度倍数，默认值是2。举个例子：如果你的浏览器视口高度是800px，设置为2的话，当滚动到距离底部1600px时就会触发加载——这自然会导致还没到页面底部就触发了。

你可以尝试把这个值调小，比如设置为0.5或者1，测试效果：

<div class="row" infinite-scroll [infiniteScrollDistance]="0.5" (scrolled)="onScrollDown()">
  <!-- 你的列表内容 -->
</div>

2. 确认滚动容器是否正确绑定 #

如果你的滚动不是基于整个window，而是某个自定义的容器（比如.row的父元素设置了固定高度且overflow: auto），那必须指定infiniteScrollContainer参数，告诉插件监听哪个容器的滚动事件：

先给滚动容器添加一个id：

<div id="scroll-container" style="height: 100vh; overflow: auto;">
  <div class="row" infinite-scroll [infiniteScrollContainer]="'#scroll-container'" (scrolled)="onScrollDown()">
    <!-- 列表内容 -->
  </div>
</div>

如果没指定正确的容器，插件会错误计算滚动位置，大概率会导致提前触发。

3. 排查页面布局的高度计算偏差 #

有时候页面里的元素存在动态加载内容、隐藏高度或者布局塌陷的情况，会导致插件计算的页面总高度不准确。你可以：

• 确保列表内容的高度是正确渲染的，没有因为异步数据加载延迟导致高度计算错误
• 在onScrollDown()里打印滚动相关参数，手动验证计算逻辑：

onScrollDown() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight;
  const clientHeight = document.documentElement.clientHeight;
  console.log(`滚动位置: ${scrollTop}, 页面总高度: ${scrollHeight}, 视口高度: ${clientHeight}`);
  // 你的加载逻辑...
}

通过这些数值可以判断插件的触发条件是否符合你的预期。

4. 调整滚动事件节流参数（可选） #

如果页面滚动事件触发过于频繁，可能会导致插件误判。可以尝试设置infiniteScrollThrottle为合适的毫秒值，或者暂时禁用节流测试：

<div class="row" infinite-scroll [infiniteScrollThrottle]="0" (scrolled)="onScrollDown()">
  <!-- 内容 -->
</div>

你可以逐个尝试这些方案，应该能解决提前触发加载的问题。

内容的提问来源于stack exchange，提问作者SnailMann