dnd-kit
dnd-kit copied to clipboard
Auto scroll is broken when using multiple containers
First I want to give some praise to this repo, it's nothing short of amazing. Code is really neat with plenty to learn from and it is a really powerful tool. Thanks!
Nevertheless, I've found one other issue (besides experiencing this one - #1080), and now it's about the auto scroll feature.
If we take the official example from the story book (Multiple Containers - Basic Setup), and we limit the height of horizontally sortable containers and make their overflow-y
to auto
or scroll
, then horizontal auto scroll becomes basically unusable.
Here is a video where I copied the code from this repo to recreate the same example from the storybook with the additions mentioned above. Notice how it breaks on empty containers, while it seems to work fine when there are items in them. I tried conditionally adding overflow-y
property if there are multiple children present, but then it happens for non-empty containers and not for the empty ones.
https://user-images.githubusercontent.com/20325132/229306611-35b95d23-ed84-4fe4-9f2a-b66aa8d1e07f.mov
Literally just removing overflow-y
fixes the jitter, but it would be neat if we would be able to scroll even vertically.
I already tried altering the autoScroll
config:
- disabling
layoutShiftCompensation
does not help - removing y axis scrolling does not help ( e.g.
threshold: { x: 0.2, y: 0 }
) - added a
canScroll
function to skip the nested containers from auto scrolling vertically and only allow scrolling horizontally in the parent container - does not work
Any help is appreciated, thanks!
I'm facing the same issue, did you find a solution ?
I found this, https://github.com/clauderic/dnd-kit/issues/1108. It solved my problem
My solution is the linked PR above, I am using a patched local package of this repo.
https://github.com/clauderic/dnd-kit/pull/1094 works well. You saved my time thank you :)