防止地址栏隐藏在移动浏览器中 [英] Prevent Address-Bar hiding in mobile Browsers

问题描述

我目前正在制作一个水平布局的网站。所有元素都是位置：使用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; / *防止overscroll反弹* / 
 background-color：lightgreen; 
溢出-y：scroll; 
 -webkit-ove rflow-scrolling：touch; / * iOS速度滚动* / 
宽度：50％; 
保证金余额：25％; 
} 
  

I'm currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Problem is that despite the elements are no higher than the window's height, I can scroll down (height of the addressbar). This is annoying in two ways. First it triggers the window-resize event which I neither want nor need at that time. And Second it does not play well with some content boxes whose content should be scrollable vertically. Sometime I can scroll the boxes, but sometimes the whole page is scrolled first (as said before: height of the addressbar). Is there any solution which would allow me to prevent this address-bar auto-hiding mechanism on all devices.

Thank in advance!

This is not scrollable at all:http://maxeffenberger.de/test.html

This can be scrolled horizontally (makes sense to see hidden content) BUT also vertically until the addressbar is hidden (makes no sense, as there is no additional "vertical" content that would need more space: http://maxeffenberger.de/test2.html

解决方案

This is the way I have achieved it:

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

这篇关于防止地址栏隐藏在移动浏览器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！