React beautiful DND多Droppable间拖拽自动滚动速度过慢问题求解

这个问题是多投放目标拖拽场景的常见性能问题，核心原因是默认自动滚动逻辑需要遍历所有Droppable的边界计算触发区域，Droppable数量越多，滚动速率计算的开销越大，边缘滚动速度就会越慢。以下是可落地的优化方案：

• 调整全局自动滚动配置
  直接修改DragDropContext的autoScrollConfig参数，调高滚动速度上限和加速度，是改造成本最低的方案：

import { DragDropContext } from 'react-beautiful-dnd';

// 组件内使用
<DragDropContext
  onDragEnd={handleDragEnd}
  // 自定义滚动配置
  autoScrollConfig={{
    maxScrollSpeed: 25, // 默认值为10，单位px/帧，数值越大滚动越快
    acceleration: 1.8, // 默认值为0.5，数值越大进入边缘触发区后加速越快
    threshold: {
      start: 0.08, // 视口顶部8%区域触发向上滚动，默认0.2
      end: 0.08 // 视口底部8%区域触发向下滚动，默认0.2
    }
  }}
>
  {/* 表格组件内容 */}
</DragDropContext>

• 禁用非活跃Droppable的投放功能
  你的场景下每个表格行都是独立Droppable，拖拽过程中大部分Droppable其实不需要响应投放事件。可以在onDragStart触发时记录当前拖拽的行索引，渲染Droppable时仅保留可视区域内+拖拽位置上下10行的Droppable为可投放状态，其他全部设置isDropDisabled={true}，可以减少90%的边界计算开销。

• 自定义边缘滚动逻辑
  如果配置调整达不到预期，可关闭默认自动滚动，自己实现滚动逻辑，完全不受Droppable数量影响：

1. 先关闭默认滚动：autoScrollEnabled={false}
2. 在onDragUpdate回调中获取当前拖拽的鼠标坐标，判断距离视口/滚动容器的上下边距
3. 当距离小于阈值时，主动修改滚动容器的scrollTop值，速度可完全自定义控制

• 配合虚拟滚动优化
  如果表格总行数超过50行，建议搭配虚拟滚动组件仅渲染可视区域内的行，从根源上减少Droppable的总数量，滚动性能会和单Droppable场景完全一致。

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