Material UI SwipeableDrawer 中的固定元素在滚动时会在移动设备上移动位置

Question

我正在使用 Material UI 的 SwipeableDrawer 组件创建一个带有固定操作按钮容器的底部抽屉。容器用

position: fixed; bottom: 0;

定位。这在桌面浏览器上运行良好，但我在移动设备上遇到了问题。

当 SwipeableDrawer 内的内容足够长以进行滚动时，我滚动到底部然后尝试进一步滚动，固定元素（操作按钮容器）会移动位置并且不再与底部对齐。

<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
  {/* long content */}
  <Box
    sx={{
      backgroundColor: "#fff",
      position: "fixed",
      bottom: "0",
      left: "0",
      display: "flex",
      width: "100%",
      "> *": {
        flex: "1",
      },
    }}
  >
    <Button onClick={toggleDrawer(anchor, false)}>Cancel</Button>
    <Button onClick={toggleDrawer(anchor, false)}>Submit</Button>
  </Box>
</SwipeableDrawer>

这是示例代码 和演示视频

我尝试过使用

position: sticky

，但这不符合我的其他要求，所以我不考虑使用粘性。

任何见解或解决方案将不胜感激。谢谢！

Answer 1

由于抽屉元素已经

fixed

定位，因此将另一个

fixed

定位的元素放入其中会导致问题。您应该将按钮容器移到抽屉之外，将其

z-index

值 设置为高于 1200（抽屉的默认 z 索引），然后在抽屉未打开时将其隐藏，如下所示：

<div>
  {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => (
    <React.Fragment key={anchor}>
      <Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
      <SwipeableDrawer
        anchor={anchor}
        open={state[anchor]}
        onClose={toggleDrawer(anchor, false)}
        onOpen={toggleDrawer(anchor, true)}
      >
        {list(anchor)}
      </SwipeableDrawer>
      <Box
        sx={{
          backgroundColor: '#fff',
          position: 'fixed',
          bottom: '0',
          left: '0',
          display: state[anchor] ? 'flex' : 'none',
          width: '100%',
          zIndex: 1201,
          '> *': {
            flex: '1',
          },
        }}
      >
        <Button onClick={toggleDrawer(anchor, false)}>Cancel</Button>
        <Button onClick={toggleDrawer(anchor, false)}>Submit</Button>
      </Box>
    </React.Fragment>
  ))}
</div>

您可以查看 this StackBlitz，获取示例代码更新版本的实时工作示例。