Address bar/URL bar remains unchanged when scrolling on mobile Safari
P粉768045522
P粉768045522 2023-08-16 12:29:00
0
1
500
<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>
P粉768045522
P粉768045522

reply all(1)
P粉251903163

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: your body is not scrollable, and your ContentContainer 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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template