我目前正在开发一个水平布局的网站。所有元素都是 position:absolute 与 javascript。它们的大小是用 window.innerHeight 计算的。我的问题是，尽管元素不高于窗口的高度，但我可以向下滚动（地址栏的高度）。这在两个方面很烦人。首先，它触发当时我既不需要也不需要的窗口调整大小事件。其次，它不适用于某些内容应垂直滚动的内容框。有时我可以滚动框，但有时首先滚动整个页面（如前所述：地址栏的高度）。是否有任何解决方案可以让我在所有设备上阻止这种地址栏自动隐藏机制。
预先感谢！
这根本不可滚动：http : //maxeffenberger.de/test.html
这可以水平滚动（看到隐藏的内容有意义）但也可以垂直滚动，直到地址栏被隐藏（没有意义，因为没有额外的“垂直”内容需要更多空间：http : //maxeffenberger.de/test2 .html
这是我实现它的方式：
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 */
}
在您的页面上使用此样式代码。现在您的 chrome 网址栏不会隐藏。它将停止滚动。
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
如果有人仍然遇到隐藏地址栏的问题，这就是我的工作方式。
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 正在杀死我。只有这对我有用。当您在页面底部有导航时，自动隐藏栏是主要问题。
唯一对我有用的解决方案是：
将您的正文内容放入具有以下样式的包装器中：
.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 */
}
半像素偏移将不可见，但它们会阻止浏览器将主体视为可滚动的，从而阻止地址栏隐藏。
最可靠的解决方案可能是使用全屏 API：http : //updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API