支持嵌套滚动容器

作者: alexreardon创建于 2017年10月2日更新于 2025年8月4日
标签new feature 🎨priority: high 🔥

添加对 n 层深度滚动容器的支持。目前只支持单一层级。 # 当前计划 此计划将允许嵌套滚动容器,并提高滚动更新的性能。 ## 收集(拖动开始) - 采集所有 `Droppable` 元素 - 取第一个元素并沿 DOM 树向上遍历。如果元素是一个滚动容器,则为其添加 `data-*` 属性(例如 `data-react-beautiful-dnd-scroll-container=${index}`)。在收集期间缓存元素及其结果 - 当 `node.parentElement` 为 `null` 时,转到下一个 `Droppable`。如果找到之前已调查过的元素,则跳过其余的向上搜索。访问元素时,我们还需要检查元素是否具有 `position:fixed` 来支持 `position:fixed`。 ## 拖动期间存储 - 存储 `Droppable` 时,我们将保留一个映射(或链表),以注册 `Droppable` 的滚动容器。 - 更新 `Droppable` 的框架时,需要更新其祖先。 - 在内部计算 `Droppable` 位移时,需要考虑所有祖先。 ## 更新(滚动事件) - 向 `window` 添加一个单个滚动监听器,作为 `capture:true` 监听器。这将捕获所有滚动事件。 - 如果滚动事件的源是具有 `data-react-beautiful-dnd-scroll-container` 属性的滚动容器,则触发更新所有相关 `Droppable` 的操作。针对所有 `Droppable` 进行一次 `redux` 更新(修复 #244)。内部算法需要更新,以考虑 `0 <-> 多` 滚动容器。 - 如果滚动发生在 `window` 上,则触发窗口滚动操作。目前,此操作由拖动控件处理。拖动控件将不再处理此操作。 - 如果滚动事件的源是一个不是 `data-react-beautiful-dnd-scroll-container` 的滚动容器,则可以忽略它。 ## 自动滚动 - 需要对其工作方式进行一些调查。 - 需要调查我们的推滚动在使用键盘移动时是否可行。 ## 清理(拖动结束) - 删除所有 `data-react-beautiful-dnd-scroll-container` 属性 - 删除单个 `window` 事件监听器。 ## 附加内容 - 我们可以在发生拖放动画时保持滚动监听器激活,并刷新所有拖放动画。

内容来源: atlassian/react-beautiful-dnd