Como ocultar a barra de endereço de um navegador móvel?
O Safari e o Chrome em dispositivos móveis incluem uma barra de endereços visível quando uma página é carregada. Enquanto obody da página rola, esses navegadores rolam a barra de endereços para fora da tela para fornecer mais espaço ao site, conforme mostrado nesta imagem:
Estou com um problema no meu site, permitindo isso. Estou trabalhando em um Pokedex que contém uma lista muito longa de todos os Pokémon. No entanto, com a maneira como configurei a página, ela não deseja rolar a barra de endereço fora de vista.
Meu html se parece com:
<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>
Se eu rolar para o final absoluto da lista (ou seja, 721 entradas), qualquer outra rolagem moverá a barra de endereço para cima da tela. Se eu tocar na barra de navegação e arrastá-la para cima, a barra de endereços sairá da tela. Ambas parecem maneiras não intuitivas de fazer isso.
Eu imagino que há alguma maneira de rolar o corpo da página usando javascript que o ocultará, maso que eu tentei até agora não funciona Nenhuma rolagem visível ocorreu quando eu fiz isso.
Como posso rolar a página o suficiente para ocultar a barra de endereço de um navegador móvel logo após o carregamento da página?
EDIT: Quanto mais eu olho para isso, mais impossível parece fazê-lo sem a interação do usuário. Se eu precisar da interação do usuário, seria possível que o toque de um usuário no centro da tela tentasse primeiro rolar o corpo antes de tentar rolar o div com todas as entradas nele? Se isso funcionar da maneira que eu estou pensando, primeiro deslize a barra de endereço antes de deslizar pela lista. É o contrário do comportamento padrão do navegador, por isso pode não ser possível / fácil / confiável, mas estou disposto a tentar ver se alguém tem alguma idéia.