How do you make the react-beautiful-dnd auto scroll horizontally ？

[zjh1943]

Hi, I'm using react-beautiful-dnd to make our kanban function. But the problem about horizontally auto-scrolling trouble me very much. The issue is submit here. In short, (as the author said), the react-beatiful-dnd will not auto scroll if I have two level scrollable containers (one is horizontal, the other is vertical).
But when I read your code and play with your demo, there is not the problem like mine. So, what magic do you use to solve the problem? Could you tell me? Thx very much! @yogaboll

[markusenglund]

I encountered this problem also. The way I solved it was to make the horizontal scroll container be the whole page itself.

To clarify:

Right now you probably have a div with overflow-y:auto that contains the whole board. That is your current scroll-container. Just remove overflow-y:auto so that the page itself becomes the scroll-container. That might fix it.

[zjh1943]

@yogaboll Thank you very much, for your detailed explanation. You did much help to me.
You help me do decide to not use react-beautiful-dnd in my project.
I'm now using react-dnd and react-virtulize to implement my kanban. This example https://github.com/edulan/react-virtual-kanban help me a lot.

Thank you~

[markusenglund]

Ok, good luck!