我在构建移动网站时遇到了一个有趣的问题.
我设置’溢出：隐藏;’切换抽屉时的html / body.这样就不能滚动窗口了,抽屉 – 可滚动 – 达到它的限制时不会滚动页面(e.preventDefault();& e.stopPropagation();根本不做特技).
一切都很好.很棒,如果这是一个Phonegap应用程序.但是 – 由于这是一个网站,不一致的溢出设置会在浏览器的“全屏模式”下产生可用性问题. “全屏模式”是指在向下滚动页面时隐藏地址栏.向上滚动时,栏会重新出现.切换抽屉时,浏览器基本上处于“非全屏模式”或“全屏模式”.后者是真正的问题 – 因为用户根本无法访问地址栏 – 并且给人留下浏览器锁定或者奇怪的印象.
关于如何(可能使用Javascript)滚动/ touchmove的任何明智想法仍然可以提供进入/退出’全屏模式’的效果？我玩过全屏API,但这是正确的全屏,而不仅仅是地址栏.
这里有一些截图：
>网站加载,我们可以看到地址栏
>网站可按预期滚动,浏览器进入“全屏模式”
>我们切换抽屉打开 – 网站现在没有响应(除抽屉滚动和任何手势[通过AngularJS指令]我必须隐藏抽屉)
>当地址栏可见时,抽屉切换.对于可用性有好处,但是在使用站点时预期的“全屏模式”不会发生(拥有房地产会很好).
EDIT2：https://medium.com似乎实现了我所追求的目标.
EDIT3：一个看不见的绝对定位div在一切之上取得了一些成功 – 但这有它自己的问题.
解决方法
出于兴趣,Firefox for Android在这种情况下做了什么？如果Firefox没有显示类似的可用性问题,可能值得向Chromium团队提交错误.
编辑：我通过他们各自支持ADB的远程调试器(非常好的工具！)在Android Chrome和Android Firefox中运行时查看了https://github.com/patrickmarabeas/marabeas.io的代码.
我得出的结论是,当身体溢出时隐藏在地址栏上,一旦它隐藏起来,就没有很好的方法可以显示地址栏.
然而,经过一个黑客的方式！
将主要可滚动区域从body移动到div,在本例中为#content.然后,位置：绝对;在移动设备上,让它填充视口加上一些额外的高度.下面给出了在移动浏览器上应用的相关CSS：
body {
position: absolute;
top: 0;
bottom: -100px;
left: 0;
right: 0;
}
#content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
}
然后,当浏览器正在寻找正在滚动的主体是否显示地址栏时,请将#content滚动链接到主体滚动,尽管这可能没有效果！：
var lastScrollTop = 0;
document.getElementById('content').addEventListener('scroll',function(e) {
var currentScrollTop = document.getElementById('content').scrollTop;
if(currentScrollTop < lastScrollTop) {
// Upwards scroll!
document.body.scrollTop -= 10;
} else {
// Downwards scroll!
document.body.scrollTop += 10;
}
lastScrollTop = currentScrollTop;
});
我现在正在向您发送拉取请求：https://github.com/patrickmarabeas/marabeas.io/pull/5