React 漂亮的 DND - 在 Droppable 之间自动滚动

Question

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

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

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

这张 GIF 就可以说明问题。

您有任何解决方案的线索吗？

Answer 1

这可能是由于react-beautiful-dnd autoscroll 干扰了名为scroll-behavior 的css 属性造成的。我自己花了一天时间调试这个问题。

1. 如果您使用 bootstrap，默认情况下，bootstrap 设置{scroll-behavior: smooth}为整个 html 标签。要应用react-beautiful-dnd的快速自动滚动，这个css属性应该是{scroll-behavior: unset !important}

2. 如果您没有使用 bootstrap 或其他库，请检查您的 css 样式表，并查看是否{scroll-behavior: smooth}在 Droppables 的任何父容器中的任何位置设置了 ，然后取消设置它们。

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

看来当scroll-behavior在css或javascript中定义时（如果你使用window.scrollBy()），它可能会干扰react-beautiful-dnd的快速自动滚动功能，并使其变慢。

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

这是我的 gif 示例- 列中的所有容器都是可放置的