Question

我有一个渲染一些子组件的组件。我正在移动浏览器Chrome和Safari上运行该应用程序，并在iOS上以PWA身份运行。

当我在全屏材质对话框中渲染该组件时，滚动会像预期的那样平滑且快速。

但是，当我在Container组件内渲染相同的组件时（请参见下面的代码），滚动缓慢且不平滑。行为与对话框API页面中所述完全相同（滚动长内容部分），但在容器组件API上看不到任何类似的属性（scroll = paper或body）。有什么想法吗？我在这里做什么错了？

样式对象：

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
content: {
    flexGrow: 1,
    height: '100vh',
    overflow: 'auto',
  },
  container: {
    paddingTop: theme.spacing(4),
    paddingBottom: theme.spacing(4),
    justifyContent: 'center',
    alignItems: 'center'
  }
}

以及我使用奇怪的滚动问题渲染组件的函数：

<main className={classes.content}>
  <Container maxWidth="lg" className={classes.container}>
       <MyComponent/>
  </Container>
</main>

Answer 1

WebkitOverflowScrolling: 'touch'毕竟完成了工作。

在React Material Container组件内部滚动不流畅

1 个答案: