ReactJS水平无限滚动实现求助：已通过redux-infinite-scroller完成垂直滚动

我之前在使用redux-infinite-scroller实现水平无限滚动时也踩过不少坑，给你几个实际可行的解决方案，你可以逐一排查尝试：

1. 先确保容器样式适配水平滚动 #

水平滚动的核心是容器要支持横向溢出，这是最容易忽略的点，你需要给InfiniteScroll的容器添加正确的CSS样式：

/* 给InfiniteScroll容器添加的样式 */
.infinite-scroll-horizontal-container {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex; /* 让子元素横向排列 */
  height: ${props => props.height}px; /* 保留垂直高度，避免内容纵向溢出 */
}

同时要保证你的render_items()返回的每个子项样式支持横向排列，比如设置flex-shrink: 0（防止被压缩）或者display: inline-block，避免子项自动换行。

2. 核对组件属性的适配性 #

开启horizontal={true}后，要确认组件的尺寸属性是否匹配水平模式：

• 有些版本的redux-infinite-scroller在水平模式下，需要用containerWidth替代containerHeight来定义容器的横向尺寸，你可以尝试替换属性试试；
• 检查loadMore的触发逻辑是否基于横向滚动位置，而不是纵向的滚动距离。

3. 手动实现水平滚动监听（组件自带模式失效时） #

如果redux-infinite-scroller的horizontal属性本身存在bug，直接手动实现水平无限滚动逻辑会更稳定：

class MessageList extends React.Component {
  constructor(props) {
    super(props);
    this.scrollContainerRef = React.createRef();
  }

  componentDidMount() {
    // 绑定滚动监听事件
    this.scrollContainerRef.current.addEventListener('scroll', this.handleHorizontalScroll);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听，避免内存泄漏
    this.scrollContainerRef.current.removeEventListener('scroll', this.handleHorizontalScroll);
  }

  handleHorizontalScroll = (e) => {
    const { scrollLeft, clientWidth, scrollWidth } = e.target;
    // 当滚动到距离右侧100px时提前触发加载（数值可根据需求调整）
    if (scrollLeft + clientWidth >= scrollWidth - 100) {
      this._loadMore();
    }
  }

  render() {
    return (
      <div
        ref={this.scrollContainerRef}
        style={{
          overflowX: 'auto',
          overflowY: 'hidden',
          display: 'flex',
          height: this.props.height
        }}
      >
        {this.render_items()}
      </div>
    );
  }
}

这种方式绕开组件自带的水平模式，直接控制滚动触发逻辑，兼容性和稳定性都更好。

4. 验证滚动触发的前置条件 #

如果滚动时始终不触发loadMore，可以在浏览器开发者工具中检查容器的尺寸：

• 确认容器的scrollWidth（内容总宽度）大于clientWidth（容器可视宽度），这样才会出现横向滚动条；
• 检查滚动条的scrollLeft值是否能达到触发加载的阈值。

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