prevent scroll into nothing while draging
07:43 25 Mar 2025

I use dnd-kit for react in a tanstack-table surrounded by a div which has scrollbars.

The Problem is, as shown in the gif below, i can scroll into nothing. I want to prevent that.

It should only scroll to the end of the table, both on x and y axis.

Unfortunately i can not use DndContext modifiers to restrict dragging to y axis since i also have to use the same DnDContext for the dragable table heasers (those can be rearranged).

I tried it with CSS (i use tailwind) but neither overscroll-behavior nor scroll-snap-stop worked, and i ran out of ideas.

enter image description here

Here is a stackblit example of the Problem, thou this is just for vertical. Simply giving overflow: visible to the parent element gives you the opportunity to scroll endlessly into nothing.

css reactjs scrollview dnd-kit tanstack-table