React-DnD - 当顶部有固定元素时将元素拖动到屏幕顶部不会向上滚动页面

Posted 2023-05-08

【中文标题】React-DnD - 当顶部有固定元素时将元素拖动到屏幕顶部不会向上滚动页面

【英文标题】：React-DnD - Dragging an element to the top of the screen when there's a fixed element on top doesn't scroll the page up

【发布时间】：2020-06-13 22:02:20

【问题描述】：

我有一个仪表板，上面有多个 DnD 元素和一个固定的 AppBar。我发现如果你将元素拖到页面顶部（当你已经向下滚动页面时）它不会向上滚动，但是如果你从 AppBar 中删除 position: fixed 属性，它会.因此，固定的 AppBar“阻止”了支持 html5 滚动页面。 我已经检查过了，这不是z-index 问题。它与 position: fixed 属性有关，因此与 CSS Stacking Context 我正在使用react-dnd 和 MaterialUi。 有人遇到过这样的事情吗？ 编辑： 我已经尝试过 react-dnd-scrollzone 和前端集体fork。两者都不再受支持，当我降级我的 react-dnd 版本时它们都不起作用。 顺便说一句，我使用的是 react-dnd 10.0.2 版。

【参考方案1】：

也遇到过这个问题，看起来确实是堆栈上下文问题，但我无法找到 CSS 解决方案。

react-dnd-scrollzone 可能已经解决了这个问题，但不再受支持，前端集合 forked it 并已更新它以支持 react-dnd 7。 但是我没有对此进行测试，而是选择从头开始实现此功能。

【讨论】：

我都试过了。更新了问题以注意这一点。

【参考方案2】：

当我遇到同样的问题时遇到这个问题。

我最终使用了我之前在实现自己的拖放时遇到的一些代码。 Link

let stop = true;

const scroll = (step) => 

    window.scrollBy(0, step, "smooth");
      
    if (!stop) 
  
      setTimeout(function ()  
        scroll(step) , 20
      );
  
    
  


const handleDragEnter = (e) => 

     stop = false;
     scroll(-10);
    


const handleDragLeave = (e) => 

    stop = true;
    

将 handleDragEnter 和 handleDragLeave 分配给您的固定组件。当您拖动它时，它会滚动。