AngularJS infinite-scroll指令仅显示前20行问题排查求助

看起来你遇到的问题是在Bootstrap模态框的表格里使用AngularJS infinite-scroll指令时，滚动加载失效的情况。我来帮你一步步排查和解决：

1. 核心问题：滚动容器未正确指定 #

Infinite-scroll指令默认监听的是window对象的滚动事件，但你的表格是嵌套在.scrolling-table-body这个容器里的，而不是直接在window下滚动。如果这个容器没有被设置为滚动容器，指令根本检测不到滚动行为。

修复步骤： #

• 首先确保.scrolling-table-body有固定高度和滚动属性：

  .scrolling-table-body {
    max-height: 400px; /* 根据你的模态框实际高度调整 */
    overflow-y: auto;
  }
  

• 然后给tbody的infinite-scroll指令添加容器指定：

  <tbody infinite-scroll="loadMore()" infinite-scroll-container=".scrolling-table-body">
  

  这样指令就会监听.scrolling-table-body的滚动事件，而不是默认的window。

2. 检查初始加载与终止条件 #

你提到打开模态框时显示20条数据，但初始只加载了10条——这说明模态框打开时，infinite-scroll自动触发了一次loadMore()（因为初始滚动容器高度不足，滚动条已经触底）。之后无法加载更多，先确认这两个关键点：

• 确认$scope.numberOfDuplicates的值是否大于20：如果这个值是20，那last < $scope.numberOfDuplicates的条件在加载到20条后就不满足了，自然不会再加载。可以在loadMore()里加日志输出验证：

  $scope.loadMore = function () {
    const last = $scope.duplicatesArray.length;
    console.log("当前条数:", last, "允许总条数:", $scope.numberOfDuplicates);
    if (last < $scope.numberOfDuplicates) {
      // ... 你的数据添加逻辑
    }
  };
  

• 优化循环逻辑：你的循环每次固定添加10条，但如果剩余可添加数量不足10条（比如numberOfDuplicates是25，当前是20），会导致超出限制。可以调整循环上限：

  const addCount = Math.min(10, $scope.numberOfDuplicates - last);
  for (let i = 1; i <= addCount; i++) {
    // ... 生成并添加新数据
  }
  

3. 模态框结构的影响 #

你的模态框结构里，.modal-body的样式可能会干扰内部滚动容器的行为：

• 确保.modal-body没有设置overflow: auto，否则滚动事件会被模态框本身捕获，而不是内部的.scrolling-table-body。
• 检查#fixed-header-table的样式，确保它没有遮挡或者挤压.scrolling-table-body的滚动区域。

4. 额外调试技巧 #

• 手动监听滚动容器的事件，确认滚动是否被检测到：

  angular.element(document.querySelector('.scrolling-table-body')).on('scroll', function() {
    console.log('滚动事件触发了！');
  });
  

  如果这个日志没输出，说明滚动容器的样式设置有问题，需要重新调整高度和overflow属性。
• 调整触发距离：如果你的滚动容器高度较小，可以修改infinite-scroll-distance参数（默认是2，代表距离底部200px时触发）：

  <tbody infinite-scroll="loadMore()" infinite-scroll-container=".scrolling-table-body" infinite-scroll-distance="1">
  

按照这些步骤排查，应该能解决滚动加载失效的问题。

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