Address bar/URL bar remains unchanged when scrolling on mobile Safari
P粉768045522
2023-08-16 12:29:00
<p>I'm building a website using React (16.8.6), but on mobile Safari, when the user starts scrolling, it doesn't collapse/shrink the URL bar like other websites do. </p>
<p>The CSS for the wrapping div looks like this: </p>
<p><br /></p>
<pre class="brush:js;toolbar:false;"><ContentContainer>
<ScrollContainer>
{...otherComponentsHere}
<ScrollContainer/>
<ContentContainer/></pre>
<pre class="brush:css;toolbar:false;">const ContentContainer = styled.div`
height: 100%; /*Allow two columns to occupy the entire height of the browser window*/
overflow-y: auto;
flex-grow: 1;
display: flex;
flex-direction: column;
`;
const ScrollContainer = styled.div`
flex: 1;
`;</pre>
<p><br /></p>
<p>App.css looks like this:</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">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; /*Make the body non-scrollable*/
box-sizing: border-box;
}</pre>
<p><br /></p>
<p>I'm trying to figure out an issue in this CSS that's preventing the Safari URL bar from collapsing as the user scrolls. Thank you for your help. </p>
To collapse/shrink the URL bar in mobile Safari, you have to make your
body
overflow the viewport, but that's not the case here: yourbody
is not scrollable, and yourContentContainer
is located entirely within the viewport.To test this, create a new page without CSS and put enough content into the
body
to make the page scrollable.