horizontal scroll not working when using infinite scroll

[pedram6195]

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

[LeeManh]

I also have the same situation

[fredmanxu]

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>

[Monu18765]

Thanks @fredmanxu your solution fixed the issue.