Javascript 如何限制移动站点的滚动，但允许访问可能收回的地址栏

我在构建移动站点时遇到了一个有趣的问题

我正在设置“溢出：隐藏；”切换抽屉时，将html/body转换为。这样，窗口就不能滚动，抽屉（可以滚动）在达到极限时不会滚动页面（

e.preventDefault（）；

&

e.stopPropagation（）；

就是不要这样做）

这一切都很好。如果这是一个Phonegap应用程序，那就太棒了。然而，由于这是一个网站，不一致的溢出设置会造成浏览器“全屏模式”的可用性问题“全屏模式”是指在向下滚动页面时隐藏地址栏。向上滚动时，该条将重新出现。切换抽屉时，浏览器基本上锁定在“非全屏模式”或“全屏模式”。后者才是真正的问题——因为用户根本无法访问地址栏——给人的印象是浏览器已经锁定或出现了一些奇怪的情况

关于滚动/触摸移动（可能使用Javascript）如何仍能产生进入/退出“全屏模式”的效果，有什么好主意吗？我已经玩过全屏API，但那是正确的全屏，不仅仅是地址栏

以下是一些屏幕截图：

站点加载后，我们可以看到地址栏

网站按预期可滚动，浏览器进入“全屏模式”

我们切换抽屉打开-网站现在没有响应（除了抽屉滚动和任何手势（通过AngularJS指令），我必须隐藏抽屉）

当地址栏可见时，抽屉切换。良好的可用性，但预期的“全屏模式”时，使用一个网站不会发生（如果有房地产会很好）

EDIT2：似乎达到了我的目标

---

EDIT3：使用一个不可见的绝对定位div在所有内容之上取得了一些成功，但这也有它自己的问题。

使用document.body.scrollTop-=1怎么样？我没有尝试，只是猜测，而不是设置溢出：隐藏位置如何：固定；溢出y：自动，这样用户可以选择滚动正文以到达地址栏或抽屉

只是出于兴趣，Firefox for Android在这种情况下做了什么？如果Firefox没有出现类似的可用性问题，那么向Chromium团队提交一个bug可能是值得的

编辑：我已经通过各自支持ADB的远程调试器（非常好的工具！）查看了在Android Chrome和Android Firefox中运行时的代码

我得出的结论是，当正文上有

overflow:hidden

时，一旦地址栏被隐藏，就没有一个好方法让它显示出来。
然而，有一个后黑客的方式

将主可滚动区域从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;
}

然后，当浏览器正在查找是否显示地址栏的滚动体时，让
#内容
滚动体与主体滚动体链接，尽管这可能没有效果！：

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

var lastScrollTop=0；
document.getElementById（'content'）.addEventListener（'scroll'，函数（e）{
var currentScrollTop=document.getElementById（'content'）.scrollTop；
如果（currentScrollTop

我现在向您发送一个拉取请求：
只需滚动文档，对地址栏没有影响。这是抽屉的当前状态，不幸的是，这一切都源于试图在抽屉达到极限时停止滚动（touchmove）传播。尽管如此，还是指向其他浏览器。我必须安装并播放。FireFox mobile完全忽略所有关于溢出被隐藏的CSS。一切都滚动。我以为这是2014年，不是90年代！也许有一个JS解决方案可以解决这个问题。你介意发布你的touchmove JS代码以便我们修改它吗？我在事件处理程序中的想法是这样的：
if（scrollHeight>drawerHeight）{return；}
除了一些关于抽屉的角度滑动指令之外，目前没有touchmove代码-这都是自包含的。你可以在这里看到这一切：你是否建议使用JS而不是溢出隐藏来限制滚动？我正在使用你的repo的克隆来研究这个问题，因为我似乎在一些项目中也遇到了这个错误。据我所知，chrome问题似乎还没有解决办法。作为旁注，我对angular和你迄今为止的工作印象深刻。你是否也应该用“angularjs”来标记你的问题，以引起更多的注意？有一种编程方法可以在移动safari中隐藏地址栏时取消隐藏地址栏（我还没有尝试过其他浏览器）。您可以通过始终设置
height:100%
或在切换幻灯片菜单时设置
height:100%
来禁用全屏手机。两者都有利弊。这就是你想做的吗？