search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.18k stars 2.53k forks source link

Support window scrolling with fixed lists #1275

Open jasonlewicki opened 5 years ago

jasonlewicki commented 5 years ago

Referencing a comment here: https://github.com/atlassian/react-beautiful-dnd/issues/757#issuecomment-420580045

I have a fixed scrolling DND container. As it scrolls while dragging, it manipulates the Window to scroll the page as well (the draggable container is a minified version of the main page). That's when the above error is thrown.

What kind of work is involved in getting this working?

alexreardon commented 5 years ago

Right now it is a deep assumption in the code that any window scroll will shift all Draggables on the page. This assumption would need to be undone and internal affordances made for items that are not subject to window scroll

jasonlewicki commented 5 years ago

to get around this:

    overflow-y: scroll;
    height: 100vh;

was added to a container inside <body>. All of my events now attach onto that child instead of window.

michaeljblum commented 3 years ago

Thanks @jasonlewicki ! But while that works great on Mac (and their proprietary implementation of scroll bars), it's finicky on Windows: I have two position: fixed drop zones flanking my dnd list for example - your two lines of CSS allow my list to be scrolled during drag. But now the scroll bar on the right extent of the page is obscured by the drop zone fixed to the right side of the page. No amount of z-index-ing resolve this.