43

我目前正在开发一个水平布局的网站。所有元素都是位置：javascript 的绝对值。它们的大小是用 window.innerHeight 计算的。我的问题是，尽管元素不高于窗口的高度，但我可以向下滚动（地址栏的高度）。这在两个方面令人讨厌。首先，它触发了我当时既不想也不需要的窗口调整大小事件。其次，它不适用于某些内容应该可以垂直滚动的内容框。有时我可以滚动框，但有时会先滚动整个页面（如前所述：地址栏的高度）。是否有任何解决方案可以让我在所有设备上阻止这种地址栏自动隐藏机制。

预先感谢！

这根本不可滚动：http: //maxeffenberger.de/test.html

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

4

10 回答 10

46

这是我实现它的方式：

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 */
}
于 2015-11-27T09:18:22.853 回答
14

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

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>
于 2018-07-18T06:34:44.007 回答
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 正在杀死我。只有这对我有用。当您在页面底部有导航时，自动隐藏栏的主要问题是。

于 2019-02-06T21:05:48.180 回答
1

因此，问题在于，我想避免对某个元素产生滚动效果。对于我刚刚设置的这个元素：

.disable-scroll {  
     overflow-y: hidden;  
     touch-action: pan-x; 
}

它适用于 Chrome 和小米默认浏览器，但不适用于 Firefox。

于 2021-12-11T22:36:45.223 回答
1

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

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


.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 */
}

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

于 2020-05-08T16:26:04.687 回答
0

最可靠的解决方案可能是使用全屏 API：http ://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

于 2013-08-08T09:46:07.863 回答
0

以下对我有用：

HTML

<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;

    ⋮
}
于 2021-06-28T19:47:38.523 回答
0

这在 iOS 15 中对我有用。虽然我的网络应用程序禁用了缩放。顶栏和底栏始终为全尺寸。

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densityDpi=device-dpi, minimal-ui' />
于 2022-03-04T02:05:36.750 回答
-1

使用 window.innerHeight 为您的站点设置边界

您可以将html和body或您的包装器设置为

var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

请记住，每次调整大小时都需要更新它！

window.innerHeight允许您获取浏览器视图内部的实际高度（没有浏览器栏）。您可以在栏可见时实现内容的高度，甚至在它隐藏时（向下滑动）。

就我而言：
1.通过 CSS将body设置为100vh 。
不幸的是， vh忽略了浏览器栏，这在现代浏览器的移动设备上导致了一些问题，这些浏览器在滚动时/之后隐藏了栏。看看。_

这也是我对上述问题的解决方案。

2.通过JS用规定的函数计算出准确的高度。每次调整大小时更新！
=> 网站的内容现在被限制在视图的内部。

在移动设备上：
Android 7.1.1/ Chrome 61.0 iOS 9.3.5/ Safari

=> 现在浏览器栏不再隐藏在滚动和滑动事件上。

请记住：
只有当您不使用某些导致您认为您正在水平滚动但实际上正在使用body.height的库时，它才有效。

于 2018-01-31T12:48:07.727 回答
-3

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

查看http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/的解决方案。

于 2013-08-05T15:18:47.240 回答