Dragging object does not trigger scrolling in target scroll container (despite use of DragOverlay)

[LionelMarbot]

Hi,

Thanks for this great library. We are currently struggling with a scrolling issue.

We have created an example for you: https://codesandbox.io/p/sandbox/dnd-kit-scroll-issue-example-jrqdzz

In this simple example, we have two scrollable containers. The one on the left contains the draggable objects, the one on the right contains the dropable areas.

Now, when we drag an item from the left column to the right column, it scrolls only in the left column and not in the right one.

How can we fix this? It feels like such a trivial thing, but we cannot get it to work.

[clauderic]

There's a new version of @dnd-kit coming soon. You can learn more here. You can try the new @dnd-kit/react package which solves this issue, though be aware that this is still an alpha release and that there could be breaking changes in the near future if you are planning to use this in production.

https://codesandbox.io/p/sandbox/dnd-kit-scroll-issue-example-forked-4fjkh5?file=%2Fsrc%2FApp.tsx%3A1%2C79

[LionelMarbot]

Thanks for your quick reply. This does indeed fix the example. However, we intend to use this in production within the next 1 or 2 months.

Do you think it will be "stable" by then?

[the-coding-pie]

is there any fix for the existing library? When I drag an item, the scrollbar of the body is not scrolling(it works if the droppable has large area, but if droppable is small like a line, it is not working) . I am using Dragoverlay.

[maxzinovev]

Is it possible to implement this functionality in the older version of the library? The new version includes many changes that are difficult to integrate into the project. Moreover, it doesn't support some features, such as a custom overlay.

[maxzinovev]

I found a way to fix this issue in an older version of the library. The solution is very simple: you need to wrap the container holding the "Droppable" zones in a div and make this div "Droppable" as well. I assigned it a static ID and excluded it from the logic when an element is dropped onto this zone.