地址栏/URL栏在移动Safari中滚动时不会缩小

Question

我正在使用 React (16.8.6) 构建一个网站，但与其他网站不同，当用户开始滚动时，它不会折叠/收缩移动 safari 中的网址栏

包装器 div 的 CSS 如下所示：

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

const ContentContainer = styled.div`
  height: 100%; /*allows both columns to span the full height of the browser window*/
  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; /*makes the body non-scrollable*/
  box-sizing: border-box;
}

我试图找出这个 CSS 中的问题是什么，它阻止了 safari url 栏在用户滚动时折叠。任何帮助将不胜感激

Answer 1

要折叠/缩小移动 Safari 中的网址栏，您必须让您的

body

溢出视口，但这里的情况并非如此：您的

body

不可滚动，并且您的

ContentContainer

是整个视图视口。

要测试这一点，只需创建一个没有 CSS 的新页面，并放入

body

足够的内容以使页面可滚动。