Question

根据新的material-ui版本文档，滚动条已被Popover阻止。

当我打开弹出窗口时，网页的滚动条突然消失，我认为这不是用户体验的一部分。

我想在弹出窗口打开时保持滚动条可见。

我正在使用Material-UI V3.8.1。

Answer 1

要实现正确的行为，您可以将 Popper 与 Clickawaylistener

Answer 2

可以使用Popover的容器道具固定。 container props是返回其中一个的节点，组件实例或函数。容器将传递给Modal组件。默认情况下，它使用anchorEl顶级文档对象的主体，因此大多数情况下它只是document.body。此默认设置是删除文档滚动条。因此，我只使用其直接父容器而不是默认设置，它解决了这个问题。：）

<Popover
  open={...}
  anchorEl={...}
  anchorOrigin={...}
  container={this.AnchorEl.parentNode}
>

谢谢

Answer 3

我在尝试解决同样的问题时偶然发现了这个问题。改进@Tommy 的回答，我找到了一个可行的解决方案：

const NewPopover = (props) => {
  const containerRef = React.useRef();

  // Box here can be any container. Using Box component from @material-ui/core

  return (
    <Box ref={containerRef}>
      <Popover {...props} container={containerRef.current}>
        Popover text!
      </Popover>
    </Box>
  );
};

Answer 4

根据文档，如果您想保留滚动条，则应该使用Popper而不是Popover。

Answer 5

现在尝试尝试一些似乎可行的方法。取而代之的是使用波普尔。

<Popper
    id={id}
    open={popoverOpen}
    anchorEl={anchorEl}
    placement="top-start"
    disablePortal={false}
    modifiers={{
      flip: {
        enabled: false
      },
      preventOverflow: {
        enabled: true,
        boundariesElement: "scrollParent"
      }
    }}
>

然后，为了获得想要的点击效果，请安装“鼠标向下”效果，检查弹窗是否打开（如果打开），然后检查点击是否位于popper元素内部。如果没有关闭模态。

类似这样的鼠标按下效果，请注意要卸下鼠标，否则会漏水。

React.useEffect(() => {
    if (anchorEl) {
      document.addEventListener("mousedown", handleClick)
    } else {
      document.removeEventListener("mousedown", handleClick)
    }
   // Specify how to clean up after this effect:
   return function cleanup() {
      document.removeEventListener("mousedown", handleClick)
   }
}, [anchorEl])

const handleClick = event => {
    if (!document.getElementById(id).contains(event.target)) {
       setAnchorEl(null)
       setCustomOpen(false)
    }
 }

同样，如果您不确定与Popper和Popover之间还有其他区别，那只是添加了Paper，但是我不需要解释如何做到这一点。

Answer 6

我用

解决了这个问题

html {
  overflow: visible !important;
}

由于Material-ui在style="overflow: hidden;"标签上添加了html。

Answer 7

您要查找的属性称为disableScrollLock。但是使用此方法不会重新计算模态的位置，并且您的应用程序中将有一个浮动模态。相反，如此处其他一些人所述，应使用Popper。

Answer 8

我找到了另一个适合我情况的解决方案：

只需添加useEffect并附加鼠标滚轮尝试即可关闭弹出窗口：

function myPopover({/*..your props..*/}){
    const [open,setOpen] = useState(flase);
    //.... your rest of the code
    function handleClose(){
         setOpen(false);
    }
    useEffect(()=>{
        if(open){
            document.body.onwheel = handleClose; 
            document.body.addEventListener('touchstart', handleClose, false);

        }
        return ()=>{
            document.body.onwheel = undefined;
            document.body.removeEventListener('touchstart', handleClose, 
                   false);
        }
    },[open])
    return <Popover
      open={open}
      onClose={handleClose}
      anchorEl={...}
      anchorOrigin={...}
      /*... your props */
    >
}

材质用户界面-打开弹出框时取消阻止滚动

8 个答案: