Question

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

提前感谢！

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

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

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

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

Answer 4

如果隐藏地址栏仍然存在此问题，这就是它的工作方式。

 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杀死了我。只有这个对我有用。当您在页面底部导航时，该自动隐藏栏是主要问题。

Answer 5

以下对我有用：

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;

    ⋮
}

Answer 6

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

您可以将 html 和正文或包装设置为

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

请注意，每次调整大小都需要更新它！

window.innerHeight允许您获取浏览器视图内部的实际高度（无浏览器栏）。当条形图可见时，甚至在隐藏（向下滑动）条形图时，您都可以达到内容的高度。

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

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

2.通过JS计算具有所述功能的精确高度。每次调整大小时更新！
=＆GT;现在，网站的内容仅限于视图的内部。

在手机上：
Android 7.1.1 / Chrome 61.0 iOS 9.3.5 / Safari

=＆GT;现在，浏览器栏不再隐藏在滚动 - 和刷卡事件上。

请记住：
它只是工作，当你不使用某些library导致相信你正在水平滚动，但实际上是使用 body.height 。

Answer 7

使用javascript window.scrollTo（0,1）;你可以解决问题。

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

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

7 个答案: