在 React Material Container Component 内部滚动不流畅答案

【问题标题】：Scrolling inside React Material Container Component is not smooth在 React Material Container Component 内部滚动不流畅
【发布时间】：2019-07-08 08:55:56
【问题描述】：

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

当我在全屏材质对话框中渲染该组件时，滚动效果如预期般流畅且快速。

但是，当我在 Container 组件中渲染同一个组件时（请参阅以下代码），滚动速度很慢且不流畅。该行为与对话框 API 页面中描述的完全相同（滚动长内容部分），但我在容器组件 API 上看不到任何类似的属性（滚动=纸张或正文）。有什么想法吗？我在这里做错了什么？

样式对象：

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>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

【讨论】：