ReactJS web 应用程序：选择性移动滚动错误答案

【问题标题】：ReactJS web app: Selective Mobile Scrolling BugReactJS web 应用程序：选择性移动滚动错误
【发布时间】：2019-10-31 10:58:23
【问题描述】：

我正在开发一个 ReactJS 网络应用程序。我们主要使用 styled-components 对其进行样式设置，有时将 index.css 用于全局样式（body、html 等）

该应用有一个应用标题、一个页面标题和一个包含附加组件的容器。

我遇到了一个奇怪的错误，即某些移动设备无法向下滚动。特别是索尼 Xperia XCompact 和三星 S8。

.js 文件：（组件分布在多个文件中，我尽力抓取所有可能相关的内容。）

// app.js
const AppHeader = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  height: 100px;
`;

const PageHeaderContainer = styled.div`
  display: grid;
  grid-template-rows: auto auto;
  padding-bottom: 0px;
  padding-top: 10px;
`;

const Container = styled.div`
    max-width: 414px;
    height: 100%;
`

export default = () => ( 
<AppHeader/>
<PageHeaderContainer>
    <Greeting/>
    <PageTitle/>
</PageHeaderContainer>
<IntroductionSlider>
    <Container>
        {/*more components*/}
    </Container>
</IntroductionSlider>
)

index.css：

html, body{
    overflow-x: hidden;
    border: none;
    outline: none;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    scroll-behavior: smooth !important;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    width: 100%;
    height: 100%;
}

此代码在最新版本的 Chrome、Opera 和多种移动浏览器（Pixel 2、S10、Pixel 3、iPhone 7）中运行很好。

但在 Sony Xperia XCompact 和三星 S8+ 中会以某种方式禁用滚动。

我目前有一个临时修复，如果我将 body 的高度更改为自动而不是 100%，滚动将再次启用（在索尼手机上测试）。但我很难理解为什么会发生这种情况。

很多代码是继承的；我对这份工作相当陌生，但仍在努力了解正在发生的事情/事情是如何运作的。非常感谢任何帮助！

【问题讨论】：

标签： javascript css reactjs scroll

【解决方案1】：

这是移动 Chrome 中的一个错误，不久前已更新。试试这个或等待新的更新。

width:calc(100% - 1px);

【讨论】：