search

markusenglund / react-kanban

A Trello-like application built with React and Redux. Take a look at the live website:
https://www.reactkanban.com
MIT License
1.73k stars 245 forks source link

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

Closed zjh1943 closed 6 years ago

zjh1943 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

Ok, good luck!