Support for nested scroll containers

[alexreardon]

Adding support for n-level deep scroll containers. Currently, only a single level is supported

Current plan

This plan will allow for nested scroll containers, and also improve the performance of scroll updates

Collection (drag start)

• Grab all of the Droppable elements
• Take the first one and walk up the DOM tree. If the element is a scroll container then add a data-* attribute to it. (eg data-react-beautiful-dnd-scroll-container=${index}). Cache the element and its result during the collection
• When the node.parentElement is null then move onto the next Droppable. If an element is found that has previously been investigated then skip the rest of the upwards search. Use any previously found scroll parent ancestry.
• When visiting an element an we also need to check to see if the element is position:fixed for our position:fixed support

Storage while dragging

• When storing a Droppable we will keep a map (or linked list) that registers a Droppables scroll containers.
• A droppable's frame will need to be updated when any of the ancestry changes
• When calculating droppable displacement internally, all of the ancestry will need to be taken into account

Updates (scroll events)

A single scroll listener is added to the window as a capture:true listener. This will capture all scroll events.

• If the source of a scroll event is a scroll container that has a data-react-beautiful-dnd-scroll-container attribute then trigger an action to update all relevant Droppables. One redux update for all Droppables (fixes Performances and scrolling issues  #244). The internal algorithms will need to be updated to account for 0 <-> many scroll containers
• If a scroll is on the window then trigger a window scroll action. Currently, this is handled by the drag handles. Drag handles will no longer handle this
• If the source of a scroll event is a scroll container that is NOT a data-react-beautiful-dnd-scroll-container then it can be ignored

Auto scrolling

• There will need to be some investigation into how this will work.
• Need to investigate how our push scroll holds up when moving with a keyboard

Clean up (drag end)

• Remove all of the data-react-beautiful-dnd-scroll-container attributes
• Remove single window event listener

Bonus

• We could keep the scroll listeners active while a drop animation is occurring and flush any drop animations

[alexreardon]

Given the complexity in supporting a single level, I think this is out of scope for now!

[humphreybc]

@alexreardon Does this issue affect Core boards / Jira Software boards? I'm trying to improve our board experience in Dovetail and running into a lot of issues that seem to be caused by this one. I would love to know a little bit about how the Core / Software teams have tackled this.

[goldo]

Hi @alexreardon,
We just bumped to 8.0.1 🎉 and are noticing this warning. We have a horizontal scrollable board with vertical columns. It is no problem for us that we can't drag, then horizontal sroll, then drop at the right place, but we would like to clear this console warning, even in development mode. Is that possible ?

Thanks

[mtsc-rrapiteanu]

I am running into this issue too (scrollable columns + horizontal scroll on the board). I think it would be very helpful if you could tackle this in the near future. Thank you!