React 美丽的 DND - 在 Droppable 之间自动滚动答案

【问题标题】：React beautiful DND - auto-scroll between DroppableReact 美丽的 DND - 在 Droppable 之间自动滚动
【发布时间】：2021-10-10 22:50:36
【问题描述】：

我创建了一个带有可拖动行的可拖动拖放表。

为了我的项目的需要，我添加了多个带有 multiple Droppable 元素的放置目标，如下例所示： https://codesandbox.io/s/ql08j35j3q

它工作得很好，但有一个问题，滚动速度。
当我试图在页面底部的元素中放置一个项目时，它会变得非常慢。

此 GIF 将显示问题。

你有什么解决办法吗？

【问题讨论】：

【解决方案1】：

这可能是 react-beautiful-dnd 自动滚动的结果，干扰了名为 scroll-behavior 的 css 属性。我自己花了一天时间调试这个。

如果您使用的是 bootstrap，默认情况下，bootstrap 会将{scroll-behavior: smooth} 设置为整个 html 标记。要应用 react-beautiful-dnd 的快速自动滚动，这个 css 属性应该是{scroll-behavior: unset !important}
如果您没有使用引导程序或其他库，请检查您的 css 样式表，并查看是否在您的 Droppables 的任何父容器中的任何位置设置了 {scroll-behavior: smooth}，然后取消设置它们。

调试此问题的一个好方法是在浏览器中打开 Inspect Element，并查看应用于 html、body 或 Droppables 的父容器的样式。

似乎在css或javascript中定义滚动行为时（如果您使用window.scrollBy()），它可能会干扰react-beautiful-dnd的快速自动滚动功能，并使其变慢。

让我知道这是否适合你:)！

Here is my example in a gif - 列中的所有容器都是droppables

【讨论】：