Positioning issue when scrolling an item in a list that is taller than the viewport of the window

First, thanks for all the work you have put into dnd-kit. I think it is a great library so far.

I’m using the @dnd-kit/sortable preset and I’m running into an issue when I scroll an item in a list that is taller than the viewport of the window (See video below).

I read in the documentation that it is recommend to use the DragOverlay but I would like to not use it. Since it is just a recommendation shouldn’t this still work as intended? Meaning the position of the item being sorted follows the cursor?

https://user-images.githubusercontent.com/5768458/128590226-7b8dc219-f4a9-4a07-8d23-3912c1758790.mov

I’ve recreated the issue in this codesandbox if it helps. Am I missing something? Thanks in advance.

[ShamansCoding]

Is it possible to provide а detailed example in the documentation or in the Storybook? It seems that this case is not obvious to handle it only with current information from documentaion.

The documentation says that “If your draggable item is within a scrollable container, we also recommend you use a DragOverlay, otherwise you’ll need to set the draggable element to position: fixed yourself.”

I’m using DragOverlay but still facing issues with scrollable containers. Especially when container size is changing while dragging an element. As an example: when the tree node is opening and deeper level content is shown inside a draggable menu.

https://user-images.githubusercontent.com/28977555/130863938-aca1b9cb-3b2a-4fd2-bcf5-565cfe545b71.mov

[clauderic]

This isn’t a bug. If you choose not to use <DragOverlay>, you need to manually replicate some of the functionality that it provides for you.

As outlined in the documentation, if your draggable item is within a scrollable container, you’ll need to set the draggable element to position: fixed yourself so the item isn’t restricted to the overflow and stacking context of its scroll container, and can move without being affected by the scroll position of its container.