React 漂亮的 DND - 在 Droppable 之间自动滚动
React beautiful DND - auto-scroll between Droppable
我创建了一个带有可拖动行的可拖动拖放 table。
为了我项目的需要，我添加了多个带有 多个 Droppable 元素的放置目标，如本例所示：
https://codesandbox.io/s/ql08j35j3q
它工作得很好，但有一个问题，滚动速度。
当我尝试将项目放入页面底部的元素中时，速度变得非常。
此 GIF 将显示问题。
您有任何解决方案的线索吗？
这可能是 react-beautiful-dnd 自动滚动的结果，干扰了 css 属性 称为滚动行为。我自己花了一天时间调试这个。
如果您使用 bootstrap，默认情况下，bootstrap 将 {scroll-behavior: smooth} 设置为整个 html 标签。要应用 react-beautiful-dnd 的快速自动滚动，这个 css 属性 应该是 {scroll-behavior: unset !important}
如果您没有使用 bootstrap 或其他库，请检查您的 css 样式表，并查看是否在任何父容器中的任何位置设置了 {scroll-behavior: smooth}你的 Droppables，并取消设置它们。
调试此问题的一个好方法是在您的浏览器中打开检查元素，并查看应用于 html、正文或父容器的样式到您的 Droppables。
似乎在 css 或 javascript 中定义滚动行为时（如果您使用 window.scrollBy()），它可能会干扰 react-beautiful-dnd 的快速自动滚动功能，并使其变慢。
让我知道这是否适合您:) !
Here is my example in a gif - 列中的所有容器都是可丢弃的
我创建了一个带有可拖动行的可拖动拖放 table。
为了我项目的需要，我添加了多个带有 多个 Droppable 元素的放置目标，如本例所示： https://codesandbox.io/s/ql08j35j3q
它工作得很好，但有一个问题，滚动速度。
当我尝试将项目放入页面底部的元素中时，速度变得非常。
此 GIF 将显示问题。
您有任何解决方案的线索吗？
这可能是 react-beautiful-dnd 自动滚动的结果，干扰了 css 属性 称为滚动行为。我自己花了一天时间调试这个。
如果您使用 bootstrap，默认情况下，bootstrap 将
{scroll-behavior: smooth}设置为整个 html 标签。要应用 react-beautiful-dnd 的快速自动滚动，这个 css 属性 应该是{scroll-behavior: unset !important}如果您没有使用 bootstrap 或其他库，请检查您的 css 样式表，并查看是否在任何父容器中的任何位置设置了
{scroll-behavior: smooth}你的 Droppables，并取消设置它们。
调试此问题的一个好方法是在您的浏览器中打开检查元素，并查看应用于 html、正文或父容器的样式到您的 Droppables。
似乎在 css 或 javascript 中定义滚动行为时（如果您使用 window.scrollBy()），它可能会干扰 react-beautiful-dnd 的快速自动滚动功能，并使其变慢。
让我知道这是否适合您:) !
Here is my example in a gif - 列中的所有容器都是可丢弃的
