Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, these browsers will scroll the address bar off screen to give more real estate to the website as shown in this image:
I'm running into a bit of an issue with my site allowing this. I'm working on a Pokedex that contains a very long list of all the Pokemon. However, with the way I've set up the page it doesn't want to scroll the address bar out of sight.
My html looks like:
<body>
<app> <!-- My Angular2 tag for the app, no special styles for this -->
<nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
<div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
</app>
</body>
If I scroll to the absolute bottom of the list (that's 721 entries) then any more scrolling will move the address bar off the top of the screen. If I touch the navbar and drag it upward then the address bar moves off screen. Both of these seem unintuitive ways to do this.
I imagine there's some way I scroll the body of the page using javascript that will hide it but what I've tried so far doesn't work. No visible scrolling took place when I did that.
How can I scroll the page enough to hide a mobile browser's address bar shortly after the page loads?
EDIT: The more I look into this, the more impossible it seems to do it without user interaction. If I require user interaction, would it be possible for a user's touch in the center of the screen to first attempt to scroll the body before attempting to scroll the div with all the entries in it? If this works the way I'm thinking then it would first slide the address bar out of the way before sliding through the list. It's kind of the reverse of the default browser behavior so it may not be possible/easy/reliable, but I'm willing to try and see if anybody has any ideas.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
