我目前正在开发一个横向布局的网站。所有元素都是用JavaScript设置了position:absolute。它们的大小是通过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 URL地址栏将不会被隐藏，它将停止滚动。
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
overflow：hidden 不仅可以将URL栏锁定在原位，还可以防止下拉刷新行为）。 这种样式非常适用于填充屏幕高度的“全屏” UI（对于高度，您必须像上面一样使用100％，使用100vh不起作用）。 - Eric Mutta
.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 */
}
.main { position: fixed; top: 0.5px; right: 0; bottom: 0.5px; left: 0; } - Yuri Gor如果有人仍然遇到隐藏地址栏的问题，这是我解决方法：
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;
}
我尝试了很多类似的代码，但是安卓Chrome浏览器一直让我烦恼。只有这个代码对我有效。当你的导航栏在页面底部时，自动隐藏的状态栏会成为一个主要问题。
在iOS 15中，这对我很有用。尽管我的Web应用禁用了缩放，但顶部栏和底部栏始终是全尺寸。
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
我的问题是，我想避免特定元素的滚动效果。对于这个元素，我只需设置:
.disable-scroll {
overflow-y: hidden;
touch-action: pan-x;
}
它可以在Chrome和小米默认浏览器上运行，但无法在Firefox上运行。
<body>
<div> This is the container for all content. </div>
</body>
CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
⋮
}
body > div {
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
width: 100%;
height: CALC(100% + 1px);
overflow-x: hidden;
overflow-y: auto;
⋮
}
使用自定义滚动条的另一种方法：
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 3px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: #bdbdbd;
}
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
body {
overflow-y: auto;
}
使用 window.innerHeight 来设置您的网站边界
您可以将 html 和 body 或您的 wrapper 设置为
var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
请注意，它需要在每次调整大小时更新！
window.innerHeight允许您获取浏览器视图内部实际高度（没有浏览器栏）。 即使在栏隐藏（向下滑动）时，也可以得到内容的高度。
在我的情况下：
1. 通过CSS将body设置为100vh。
不幸的是，vh忽略了浏览器栏，这会导致在移动设备上使用现代浏览器时遇到一些问题，因为当/在滚动时隐藏栏。
看看at。
这也是我解决以上问题的方法。
2. 使用指定的函数通过JS计算精确高度。每次调整大小时更新！
=> 现在，网站的内容已限制在视图的内部部分。
在移动设备上：
Android 7.1.1/ Chrome 61.0
iOS 9.3.5/ Safari
=> 现在浏览器栏不再在滚动和滑动事件中隐藏。
请注意：
仅当您不使用某些库时，它才有效，这些库会让您认为自己正在水平滚动，但实际上是使用body.height。