Angular ngx infinite scroll 无法检测window滚动问题求助

排查步骤 #

• 首先移除绑定infiniteScroll指令的div上的overflow相关属性，将高度设置为auto。如果该div本身设置了固定高度+overflow，滚动事件只会在div内部触发，不会冒泡到window，自然无法触发window监听的滚动回调。
• 检查该div所有祖先元素的样式，确保没有任意一层父元素设置overflow: scroll/overflow: auto/overflow-y: scroll，如果有这类配置会拦截滚动事件，导致window监听不到滚动行为。
• 调低触发阈值验证，将[infiniteScrollDistance]暂时改为0.1，测试滚动到接近页面底部时是否会触发回调，排除阈值设置过高的问题。
• 显式指定滚动容器，在div上增加配置[infiniteScrollContainer]="window"，部分版本的无限滚动插件可能存在scrollWindow属性绑定失效的问题，显式指定容器更稳妥。
• 先在onScroll方法第一行增加console.log('滚动触发')验证回调是否被调用，若没调用再排查事件拦截问题：检查全局是否有其他代码调用了滚动事件的stopPropagation()阻止冒泡，或者Angular路由是否开启了scrollPositionRestoration: 'enabled'配置，该配置会干扰全局滚动事件监听。
• 若回调能触发但数据没加载，检查totalCount的取值是否正确，你代码里的逻辑只有totalCount > 2时才会发起请求，若该值统计错误会导致请求逻辑不执行。

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