在 MUI 网格中拖动时禁用滚动

Question

我目前正在编写一个应用程序，我在 MUI 网格中有很多列，水平滚动。这是一个任务规划器应用程序，当我创建任务时，我希望能够在屏幕上可见的不同列之间拖动它。我正在使用 hello-pangea/dnd 来控制任务的拖放功能，并且如前所述，存储列的 Grid 的 Material UI。

但是，我不喜欢它在我拖动时滚动的事实 - 网格在我拖动任务时自动滚动。我想禁用它。

我已经尝试根据是否拖动动态设置网格的 overflow CSS 样式 - 如果拖动，请将 overflow-x 设置为 hidden，否则，将其保留为 scroll。我希望这会禁用在网格中滚动的能力，因为如果我将网格初始化为具有 overflow-x: hidden，则滚动将被禁用。但是，正如您在下面看到的，这无济于事。即使样式从 overflow: scroll 更改为 overflow: hidden，拖动时网格仍会滚动：

（是的，用户界面需要工作，我最终会解决的）

我在 Google Chrome 和 Safari 上都测试过这个。我还尝试使用状态变量并设置 Grid 组件的 sx，如下所示。这也没有用。我的代码如下所示：

const View = (props) => {
    const [currentOverflow, setCurrentOverflow] = useState("scroll");

    // ...definition of taskView, etc...

    // props.dragging is a boolean passed down from the parent element
    // that is true when an item is being dragged, otherwise false 
    useEffect(() => {
        setCurrentOverflow((props.dragging) ? "hidden" : "scroll");
    }, [props.dragging])

    return (
        <Grid
            id={taskViewGridId}
            className="taskview"
            sx={{
                overflow: currentOverflow
            }}
        >
            {taskView}
        </Grid>
    )
}

在这段代码 sn-p 之前，我尝试使用 CSS 设置溢出参数的方式与上面的 GIF 类似，只是 useEffect 中的回调看起来像这样：

var gridElt = document.getElementById(taskViewGridId);

if (props.dragging) {
    gridElt.classList.remove("enable-scroll");
    gridElt.classList.add("disable-scroll");
} else {
    gridElt.classList.remove("disable-scroll");
    gridElt.classList.add("enable-scroll");
}

关联的 CSS 类在哪里

.disable-scroll {
    overflow-x: hidden;
}

.enable-scroll {
    overflow-x: scroll;
}

有人可以帮我解决这个问题吗？如何根据是否拖动某些内容来禁用 MUI 网格中的滚动？

谢谢你。

Answer 1

解决了这个问题。 @hello-pangaea/dnd 库在拖动时自动滚动窗口。禁用此功能的选项现已添加到最新版本的库中。