Cross-axis auto-scrolling causing unexpected behavior

[Rinaldo]

On the storybook auto-scroll page, trying to drag an element sideways in the first example doesn't work if the list is too close to the top or bottom of the canvas. If you try to drag an element sideways, the whole page scrolls down until the list is away from the edge of the screen.

I discovered this issue when trying to make a table with a fixed header and dnd column reordering. When you scroll down and try to reorder the column headers, the whole table starts scrolling unexpectedly.

Expected behavior

When a droppable area with a horizontal scroll is at the top of the page, auto scroll should allow for horizontally scrolling the droppable container without vertically scrolling the whole window.

More broadly, auto-scroll for a single list should only scroll on the list's axis.

Actual behavior

Auto-scroll scrolls the whole page vertically when trying to drag an element sideways if that element is close to the top or bottom of the screen

Steps to reproduce

Go to the auto-scroll storybook page and scroll down until the first example (the horizontal list of profile pics) is at the top of the screen. Try to drag a profile pic sideways and notice the whole page starts scrolling vertically.

Suggested solution?

Add an option to lock auto-scroll to a single axis

[fostyfost]

@Rinaldo hello!

I've found a solution on how to disable scrolling that occurs during dragging. In the example below, I'm blocking horizontal scrolling.

const Component: FC = () => {
  const refCallback: RefCallback<HTMLDivElement> = useCallback(element => {
    if (element) {
      Object.defineProperty(element, 'scrollLeft', {
        get: () => 0,
        set: () => undefined,
      })
    }
  }, [])

  return <ScrollableContainer ref={refCallback}>{/* {...} */}</ScrollableContainer>
}

[pedrosimao]

I was facing the same issue. @fostyfost fix did the trick for me. Maybe this is actually a big that needs fixing.