地址栏/URL栏在移动Safari上滚动时保持不变

Question

我正在使用React（16.8.6）构建一个网站，但在移动Safari上，当用户开始滚动时，它不会像其他网站那样折叠/缩小URL栏。

包装div的CSS如下所示：

<ContentContainer>
    <ScrollContainer>
        {...otherComponentsHere}
    <ScrollContainer/>
<ContentContainer/>

const ContentContainer = styled.div`
  height: 100%; /*允许两个列占据浏览器窗口的整个高度*/
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
`;
const ScrollContainer = styled.div`
  flex: 1;
`;

App.css如下所示：

html {
  height: 100%;
  min-height: 100vh;
}

body {
  font-family: 'Work Sans', 'Courier New', sans-serif;
  min-height: 100%;
  height: 100%;
  margin: 0px;
}
#app {
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  overflow: hidden; /*使body不可滚动*/
  box-sizing: border-box;
}

我正在尝试找出这个CSS中的问题，它阻止了Safari URL栏在用户滚动时折叠。非常感谢您的帮助。

Answer 1

要在移动Safari中折叠/收缩URL栏，您必须使您的body溢出视口，但这里并非如此：您的body不可滚动，而且您的ContentContainer完全位于视口中。

要测试这个，请创建一个没有CSS的新页面，并将足够的内容放入body中以使页面可滚动。