React Beautiful DnD拖拽时无法横向自动滚动问题求助

我的表格包含固定宽度的列，外层容器ScrollTable通过overflow: auto实现横向滚动，但拖拽元素到最后一列时，无法触发自动横向滚动。移除主网格区域的overflow-x: hidden后，拖拽滚动功能恢复正常，但页面布局会错乱。

相关代码 #

主网格样式 #

grid-area: content;
padding: 30px 20px;
max-height: calc(100vh - 55px);
overflow-x: hidden; 

Table.tsx #

<DragDropContext onDragEnd={onDragEnd}>
    <Droppable droppableId="all-column" type="card" direction="horizontal">
      {(provided) => (
        <ScrollTable>
          {mappedItems(elements).map((el, index) => (
            <TableWrapper
              ref={provided.innerRef}
              {...provided.droppableProps}
              className={el.prefix === "Descartados" ? "overlay" : ""}
              key={el.prefix}
            >
              <TableTitle>{el.prefix}</TableTitle>
              <Droppable
                droppableId={el.prefix}
                type="task"
                direction="vertical"
              >
                {(provided) => (
                  <TableColumn
                    {...provided.droppableProps}
                    ref={provided.innerRef}
                  >
                    {el.elements.map((element, index) => (
                      <>
                        <TableItem
                          onClick={() => {
                            setCurrentTalent(element.id);
                            dispatch(showModal("talent-side-modal"));
                          }}
                          className={
                            el.prefix === "Descartados" ? "overlay" : ""
                          }
                          key={element.id}
                          id={element.id}
                          index={index}
                        ></TableItem>
                      </>
                    ))}
                    {provided.placeholder}
                  </TableColumn>
                )}
              </Droppable>
            </TableWrapper>
          ))}
        </ScrollTable>
      )}
    </Droppable>
  </DragDropContext>

ScrollTable.ts #

const ScrollTable = styled("div")`
  width: 1200px;
  overflow: auto;
  padding-bottom: 20px;
  border-radius: 0px 5px;
  display: flex;
`

解决方案 #

问题核心是主网格的overflow-x: hidden干扰了react-beautiful-dnd的滚动检测逻辑——它会基于可拖拽区域的祖先元素识别滚动容器，但overflow-x: hidden会导致滚动容器的判定失效。可以通过以下方式修复：

1. 调整主网格样式：保留overflow-x: hidden，同时添加position: relative，确保定位上下文正确，避免影响子元素的滚动检测：

grid-area: content;
padding: 30px 20px;
max-height: calc(100vh - 55px);
overflow-x: hidden; 
position: relative;

2. 优化ScrollTable宽度：将width: 1200px改为min-width: 1200px，既保证列的最小宽度，又能自适应父容器，避免布局错乱：

const ScrollTable = styled("div")`
  min-width: 1200px;
  overflow: auto;
  padding-bottom: 20px;
  border-radius: 0px 5px;
  display: flex;
`

3. 指定滚动容器（可选）：如果使用react-beautiful-dnd v10+，可以直接给DragDropContext指定scrollContainer，明确指向ScrollTable：

// 先给ScrollTable添加class，比如"scroll-table"
<DragDropContext 
  scrollContainer={document.querySelector('.scroll-table')} 
  onDragEnd={onDragEnd}
>

如果不想指定滚动容器，也可以用overflow-x: clip替代主网格的overflow-x: hidden——clip不会创建新的BFC，既能隐藏溢出内容，又不会干扰滚动检测逻辑。

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