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

Question

我目前正在开发一个水平布局的网站.所有元素都是位置:绝对的javascript.它们的大小是用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 */
  width: 50%;
  margin-left: 25%;
}

Answer 2

在您的页面上使用此样式代码。现在您的 chrome 网址栏不会隐藏。它将停止滚动。

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

Answer 3

对我有用的唯一解决方案是：

将正文的内容放入具有以下样式的包装器中：

.wrapper {
    position: absolute;
    top: 0.5px;
    left: 0;
    right: 0;
    bottom: 0.5px;
    overflow-x: hidden; /* or any other value */
    overflow-y: auto; /* or any other value */
}

半像素偏移将是不可见的，但它们会阻止浏览器将正文视为可滚动，从而阻止地址栏隐藏。

Answer 4

使用 javascript window.scrollTo(0, 1); 你可以解决这个问题。

请参阅http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/了解解决方案。