javascript – 如何限制移动网站的滚动,但允许访问可能缩进的地址栏

I have a repo up and running if you’re interested in contributing to solutions.

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

我设置’溢出：隐藏;’切换抽屉时的html / body.这样就不能滚动窗口了,抽屉 – 可滚动 – 达到它的限制时不会滚动页面(e.preventDefault();& e.stopPropagation();根本不做特技).

一切都很好.很棒,如果这是一个Phonegap应用程序.但是 – 由于这是一个网站,不一致的溢出设置会在浏览器的“全屏模式”下产生可用性问题. “全屏模式”是指在向下滚动页面时隐藏地址栏.向上滚动时,栏会重新出现.切换抽屉时,浏览器基本上处于“非全屏模式”或“全屏模式”.后者是真正的问题 – 因为用户根本无法访问地址栏 – 并且给人留下浏览器锁定或者奇怪的印象.

关于如何(可能使用Javascript)滚动/ touchmove的任何明智想法仍然可以提供进入/退出’全屏模式’的效果？我玩过全屏API,但这是正确的全屏,而不仅仅是地址栏.

这里有一些截图：

>网站加载,我们可以看到地址栏
>网站可按预期滚动,浏览器进入“全屏模式”
>我们切换抽屉打开 – 网站现在没有响应(除抽屉滚动和任何手势[通过AngularJS指令]我必须隐藏抽屉)
>当地址栏可见时,抽屉切换.对于可用性有好处,但是在使用站点时预期的“全屏模式”不会发生(拥有房地产会很好).

EDIT2：https://medium.com似乎实现了我所追求的目标.

EDIT3：一个看不见的绝对定位div在一切之上取得了一些成功 – 但这有它自己的问题.

解决方法

而不是设置溢出：隐藏;抽屉外出时,如何制作抽屉位置：固定; overflow-y：auto;,这样用户可以选择滚动正文以到达地址栏或抽屉.

出于兴趣,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

原文地址：https://www.jb51.cc/js/158253.html