如何限制移动网站的滚动,但允许访问可能缩进的地址栏
Pat*_*ick 7 javascript css mobile angularjs
我在构建移动网站时遇到了一个有趣的问题.
我设置'溢出:隐藏;' 切换抽屉时的html/body.这是为了让窗口不能滚动,并且抽屉-这是滚动的-在达到它的极限不滚动的页面(e.preventDefault();&e.stopPropagation();根本就没有做的伎俩).
一切都很好.很棒,如果这是一个Phonegap应用程序.但是 - 由于这是一个网站,不一致的溢出设置会在浏览器的"全屏模式"下产生可用性问题."全屏模式"是指在向下滚动页面时隐藏地址栏.向上滚动时,栏会重新出现.切换抽屉时,浏览器基本上处于"非全屏模式"或"全屏模式".后者是真正的问题 - 因为用户根本无法访问地址栏 - 并给人留下浏览器锁定或者奇怪的印象.
关于如何(可能使用Javascript)滚动/ touchmove的任何明智的想法仍然可以提供进入/退出'全屏模式'的效果？我玩过全屏API,但这是正确的全屏,而不仅仅是地址栏.
这里有一些截图:
网站加载,我们可以看到地址栏
网站可按预期滚动,浏览器进入"全屏模式"
我们切换抽屉打开 - 网站现在没有响应(除了抽屉滚动和任何手势[通过AngularJS指令]我必须隐藏抽屉)
当地址栏可见时,抽屉切换.对于可用性有好处,但是在使用站点时预期的"全屏模式"不会发生(拥有房地产会很好).
EDIT2:https://medium.com似乎实现了我的目标.
EDIT3:一个看不见的绝对定位div在一切事物上取得了一些成功 - 但这有它自己的问题.
| 归档时间： |
|
| 查看次数： |
1457 次 |
| 最近记录： |