react-beautiful-dnd设置overflow-x:scroll后拖拽时滚动失效如何解决？

故障根因 #

react-beautiful-dnd 默认仅监听全局视口的滚动事件，你自定义的带overflow-x: scroll的容器没有被组件识别为滚动父级，因此拖拽到容器边缘时不会触发自动滚动。

修复方案 #

• 方案1：使用官方getScrollContainer配置指定自定义滚动容器
  给外层滚动容器绑定ref，在DragDropContext中通过该配置返回滚动容器元素即可，示例代码如下：

  import { useRef } from 'react';
  import { DragDropContext } from 'react-beautiful-dnd';
  
  // 组件内逻辑
  const scrollContainerRef = useRef(null);
  
  // 渲染部分
  <h1>My Page</h1>
  <div 
    className="columns" 
    ref={scrollContainerRef}
    style={{ overflowX: 'scroll' }}
  >
    <DragDropContext 
      onDragEnd={ result => onDragEnd(result, columns, setColumns) }
      // 新增配置指定自定义滚动容器
      getScrollContainer={() => scrollContainerRef.current}
    >
      {/* 原有Droppable、Draggable逻辑保持不变 */}
      ...
    </DragDropContext>
  </div>
  

• 方案2：补充滚动容器定位属性
  如果配置完getScrollContainer后仍有问题，给外层滚动容器添加position: relative样式，确保拖拽元素的偏移计算基于该容器，避免定位逻辑错乱：

  <div 
    className="columns" 
    ref={scrollContainerRef}
    style={{ overflowX: 'scroll', position: 'relative' }}
  >
  

• 方案3：排查边界冲突
  确认滚动容器的overflow-y属性设置为hidden，避免纵向滚动逻辑干扰横向滚动；同时确认所有列的总宽度大于滚动容器的可视宽度，保证滚动行为本身可触发。

• 方案4：版本兼容校验
  如果使用的是低于11.0.0的旧版本react-beautiful-dnd，可升级到最新稳定版，旧版本存在自定义滚动容器相关的已知bug。

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