ios - 带有 Flexbox 水平滚动的 Material-UI Drawer 在 iOS Safari 上不起作用

Question

我正在尝试在 Material-UI 的 Drawer 组件内水平滚动。它在抽屉外工作得很好，但在抽屉里却不行。

我在其他任何地方都对其进行了测试，并且它可以工作，但它不适用于 iPhone 上的 Safari。我已经尝试过物理设备以及模拟器。

https://codesandbox.io/s/material-demo-forked-qqdo2?file=/demo.js

function Scroller() {
  return (
    <Box overflow="hidden" bgcolor="primary.main">
      <Box display="flex" overflow="auto hidden">
        {[...new Array(50)].map((_, i) => (
          <Box key={i} p={1}>
            <Chip label="Test Chip" color="secondary" />
          </Box>
        ))}
      </Box>
    </Box>
  );
}

标签： iosreactjssafarimaterial-uimobile-safari

Answer 1

至少想出了一个解决方法。似乎与SwipeableDrawer禁用滚动有关。将其切换为可以Drawer正常工作。

我更新了示例以显示两个抽屉。