horizontal scroll not working when using infinite scroll
pedram6195 opened this issue · 3 comments
I have this usecase that there are several columns (containers) and inside them are draggable cards. each column must have a fixed height
and overflow-y: auto
because cards' data is coming from an external API and may be too many, so I have to implement infinite scroll inside each column.
so the problem is when I use overflow-y: auto
inside each column (the div.card-container
or div.smooth-dnd-container.vertical
no difference), and then try to drag a card from column 1 to column 8 for example, the entire container is not scrolling by itself. I've used the first example in the documentation and tweaked it a little bit to show you the problem:
codesandbox demo
screen-recorder-wed-jul-27-2022-10-40-43.webm
I also have the same situation
Initially I used react-beautiful-dnd library and it had the same problem like here.
Finally I used the solution here and here. It worked for me.
In a nutshell
npm i @richardrout/react-smooth-dnd
Set disableScrollOverlapDetection
prop to true.
import { Container } from '@richardrout/react-smooth-dnd'
return <Container
disableScrollOverlapDetection={true}
...>
// Your lists
</Container>
Thanks @fredmanxu your solution fixed the issue.