Question

一段时间以来，我一直在寻找一种方法来将材质ui弹出框定位在我的锚点之下，并始终将其保留在较小的屏幕上。

这是一个沙盒示例：https://codesandbox.io/s/material-demo-yvcqu?file=/demo.js

这是我所能得到的最好的结果，但是滚动条此时并没有真正出现在弹出容器div上，这对我没有帮助。

仅说明一下，我知道我可以在位置上使用AnchorElement，但是在较小的屏幕上，弹出窗口只会隐藏Anchor，我希望弹出窗口始终位于其下方，并且只需正文滚动，因此当我向下滚动时可以看到弹出窗口的全部内容。

import React from "react";
import {makeStyles,MuiThemeProvider,createMuiTheme} from "@material-ui/core/styles";
import Popover from "@material-ui/core/Popover";
import Button from "@material-ui/core/Button";

export default function SimplePopover() {
    const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const theme2 = createMuiTheme({
    overrides: {
      MuiButton: {
        root: {
          top: 400
        }
      },
      MuiPopover: {
        root: {
        },
        paper: {

          height: 500
        }
      }
    }
  });
  return (
    <div>
      <MuiThemeProvider theme={theme2}>
      <Button
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
         Open Popover with anchor
      </Button>
      <Popover
        id="popover-with-anchor"
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
       Popover content.
   </Popover>
   </MuiThemeProvider>
    </div>
  );
}

例如图像。当弹出窗口大于屏幕大小时，它会适合屏幕并越过锚点

而不是在锚点之下

Answer 1

请勿在{{1}}上进行overflow: scroll。相反，请对root进行overflowY: auto。

See codesandbox并玩耍。

尝试一下：

paper

Answer 2

有趣的是，Popover组件没有用于处理这种情况的属性。当弹出窗口中的数据列表很长时，我在较小的设备上遇到了类似的问题。要解决此问题，我自己在top组件的PaperProps属性上设置了Popover。见下文：

<Popover PaperProps={{ style: { top: myAnchor.current ? myAnchor.current.getBoundingClientRect().bottom : 0 } }}></Popover>

实质性UI弹出框-在小屏幕上的位置

2 个答案: