求助：拖拽任务时如何禁用MUI Grid的自动滚动

问题背景 #

开发任务规划应用时，使用MUI Grid实现横向滚动的多列布局，通过hello-pangea/dnd实现任务拖拽功能。拖拽过程中Grid会自动滚动，尝试通过以下方式禁用该行为但无效：

• 拖拽时动态将Grid的overflow-x设为hidden，非拖拽时设为scroll
• 两种实现方式：通过state变量设置MUI Grid的sx属性、添加/移除CSS类切换overflow
• 问题在Chrome和Safari中均存在，仅初始化时设置overflow-x:hidden能禁用滚动，动态切换无效

核心原因 #

1. hello-pangea/dnd内置自动滚动机制：拖拽库本身会自动检测可滚动容器并触发滚动，即使修改Grid的overflow样式，也会被库的滚动逻辑覆盖
2. 样式优先级不足：MUI Grid的默认样式可能覆盖你自定义的overflow设置
3. 样式修改时机滞后：拖拽行为触发后才修改样式，此时滚动已经被触发

解决方案 #

方案1：直接禁用hello-pangea/dnd的自动滚动（推荐） #

从根源上关闭拖拽库的自动滚动功能，比修改样式更可靠：

全局禁用（整个拖拽上下文）

在DragDropContext中配置scrollableAncestors为空数组：

import { DragDropContext } from '@hello-pangea/dnd';

<DragDropContext
  onDragStart={(dragStartResult) => {/* 你的拖拽开始逻辑 */}}
  onDragEnd={(dragEndResult) => {/* 你的拖拽结束逻辑 */}}
  scrollableAncestors={[]} // 禁用所有自动滚动
>
  {/* 你的任务列组件 */}
</DragDropContext>

单个拖拽项禁用

在useDrag钩子中设置disableAutoScroll为true：

import { useDrag } from '@hello-pangea/dnd';

const TaskItem = ({ task }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'TASK',
    item: { id: task.id },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    disableAutoScroll: true, // 禁用当前拖拽项的自动滚动
  });

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      {task.title}
    </div>
  );
};

方案2：提升自定义样式优先级 #

确保你的overflow样式能覆盖MUI Grid的默认样式，使用更具体的选择器或!important：

修改CSS类

/* 更具体的选择器，确保优先级高于MUI默认样式 */
.taskview.disable-scroll {
  overflow-x: hidden !important;
}

.taskview.enable-scroll {
  overflow-x: scroll !important;
}

组件中动态切换类

const View = (props) => {
  return (
    <Grid
      className={`taskview ${props.dragging ? 'disable-scroll' : 'enable-scroll'}`}
    >
      {taskView}
    </Grid>
  );
};

方案3：在拖拽事件触发时立即修改样式 #

利用hello-pangea/dnd的全局拖拽事件，在滚动触发前修改Grid样式：

import { DragDropContext } from '@hello-pangea/dnd';
import { taskViewGridId } from './constants';

<DragDropContext
  onDragStart={() => {
    const gridElt = document.getElementById(taskViewGridId);
    if (gridElt) {
      gridElt.style.overflowX = 'hidden';
    }
  }}
  onDragEnd={() => {
    const gridElt = document.getElementById(taskViewGridId);
    if (gridElt) {
      gridElt.style.overflowX = 'scroll';
    }
  }}
>
  {/* 你的任务列组件 */}
</DragDropContext>

总结 #

优先选择方案1，直接禁用拖拽库的自动滚动机制，这是最彻底的解决方式。如果仍需保留部分场景的自动滚动，再结合方案2或3调整样式。

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