防止在移动浏览器中隐藏地址栏

Question

我目前在一个水平布局的网站上工作。使用javascript时，所有元素都是position:absolute。它们的大小是用window.innerHeight计算的。我的问题是，尽管元素不高于窗口的高度，但我可以向下滚动(地址栏的高度)。这在两个方面令人恼火。首先，它触发了window-resize事件，这是我当时既不想要也不需要的。其次，它不能很好地处理一些内容框，这些内容框的内容应该是垂直滚动的。有时我可以滚动方框，但有时会先滚动整个页面(正如前面所说的:地址栏的高度)。有什么解决方案可以让我在所有设备上防止这种地址栏自动隐藏机制吗？

提前感谢！

这是完全不能滚动的：http://maxeffenberger.de/test.html

这可以水平滚动(对于查看隐藏内容很有意义)，也可以垂直滚动，直到地址栏被隐藏(没有意义，因为没有额外的“垂直”内容需要更多空间：http://maxeffenberger.de/test2.html

Answer 1

这是我实现它的方式：

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

Answer 2

在您的page.Now上使用此样式代码您的chrome url栏将不会隐藏。它将停止滚动。

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

Answer 3

如果有人仍然对隐藏地址栏有这个问题，这就是我的工作方式。

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

我尝试了很多类似的代码，但android chrome简直要了我的命。只有这对我有效。当你的导航栏在页面底部时，自动隐藏栏就成了主要问题。