如何为ngInfiniteScroll实现横向滚动？

嘿，我刚好做过类似的需求！要把ngInfiniteScroll从垂直滚动改成横向滚动适配你的表格，其实只需要调整几个关键配置和样式就行，我给你一步步说清楚：

ngInfiniteScroll默认监听垂直滚动，你只需要在滚动容器上加上infinite-scroll-direction="horizontal"属性，就能切换到横向滚动监听模式。示例代码如下：

<!-- 横向滚动容器 -->
<div class="table-scroll-container" 
     infinite-scroll="loadMoreItems()" 
     infinite-scroll-direction="horizontal"
     infinite-scroll-disabled="isLoading">
  <!-- 你的表格 -->
  <table>
    <tr>
      <td ng-repeat="item in dataset" class="table-cell">
        {{item.data}}
      </td>
    </tr>
  </table>
</div>

要让容器真正支持横向滚动，必须给它配置合适的CSS，确保内容超出宽度时显示滚动条：

.table-scroll-container {
  width: 100%; /* 可以设置固定宽度，比如800px */
  overflow-x: auto; /* 启用横向滚动 */
  overflow-y: hidden; /* 隐藏垂直滚动条（如果不需要） */
}

/* 确保表格单元格横向排列不换行 */
.table-scroll-container table {
  white-space: nowrap;
}

.table-cell {
  min-width: 180px; /* 给单元格设置最小宽度，避免内容挤在一起 */
  padding: 8px 12px;
  border: 1px solid #eee;
}

如果默认的加载触发时机不合适，可以用infinite-scroll-distance调整。横向模式下这个值是容器宽度的比例，比如设为0.3，表示当滚动到距离右侧还有容器30%宽度的位置时触发加载：

<div class="table-scroll-container" 
     infinite-scroll="loadMoreItems()" 
     infinite-scroll-direction="horizontal"
     infinite-scroll-distance="0.3"
     infinite-scroll-disabled="isLoading">
  <!-- 表格内容 -->
</div>

最后要确保你的loadMoreItems()函数能正确获取新数据，并追加到dataset数组中——ng-repeat会自动渲染新的单元格，扩展横向内容，这样就能触发下一次的滚动加载了。

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