Search code examples
reactjsdraggablereact-beautiful-dnd

React beautiful DND - auto-scroll between Droppable

I created a draggable drag and drop table with draggable rows.

For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example: https://codesandbox.io/s/ql08j35j3q

It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.

This GIF will show the problem. enter image description here

Do you have any clue for a solution ?

Solution

  • This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.

    1. If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}

    2. If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.

    A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.

    It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.

    Let me know if this works for you :) !

    Here is my example in a gif - All the containers in the column are droppables