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

Question

https://github.com/patrickmarabeas/angular-swipe-drawer

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

当抽屉被切换时，我将“溢出:隐藏；”设置为html/body。这样，窗口就不能滚动，而达到极限时可滚动的抽屉就不会滚动页面(e.preventDefault(); & e.stopPropagation();根本做不到这一点)。

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

对于滚动/触地移动(可能使用Javascript)如何仍然能产生进入/退出“全屏模式”的效果，有什么好主意吗？我玩过全屏API，但这是正确的全屏，而不仅仅是地址栏。

以下是一些截图：

​

​

1. 站点加载，我们可以看到地址栏。
2. 站点可按预期滚动，浏览器进入“全屏模式”
3. 我们切换抽屉打开-网站现在没有响应(除了抽屉滚动和任何手势通过AngularJS指令，我必须隐藏抽屉)
4. 当地址栏可见时，抽屉就会切换。好的可用性，但预期的‘全屏模式’时，使用一个网站没有发生(如果有房地产将是很好的)。

EDIT2：https://medium.com似乎实现了我想要的目标。

EDIT3:一个无形的、绝对定位的div坐在一切之上，这是成功的--但这也有它自己的问题。

Answer 1

与其在抽屉外出时在body上设置overflow: hidden;，不如制作抽屉position: fixed; overflow-y: auto;，这样用户就可以选择滚动主体以到达地址栏或抽屉。

出于兴趣，火狐在这种情况下会做些什么？如果Firefox不显示类似的可用性问题，可能值得向Chromium提交一个bug。

编辑:我看了https://github.com/patrickmarabeas/marabeas.io的代码时，运行在安卓Chrome和安卓火狐通过各自的亚行支持远程调试器(真的很好的工具！)

我得出的结论是，当地址栏上有overflow: hidden时，地址栏一旦隐藏，就没有什么好办法让它显示出来。

然而，有一种讨厌的方式！

将主滚动区域从主体移动到div，在本例中为#content。然后，position: absolute;身体，并使它填补视口加上一些额外的高度时，在移动。以下是应用于移动浏览器的相关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

Answer 2

使用document.body.scrollTop -= 1如何？我没试过，只是猜一下