body overflow:hidden 在移动端失效了?
为什么会突然关注到这个呢, 主要是在项目中发现一个很奇怪的页面, 页面 body 设置了 overflow:hidden, 在 PC 端浏览器中打开页面是无法滚动的.
但在 iPhone5 上打开这个页面, 却可以滚动? 匪夷所思啊~
于是开始排查代码, 以为是什么地方动态设置了 overflow:auto 之类.
然而排查一圈下来, 并没有任何发现(你一定是在逗我).
最终只好通过 weinre 远程调试, 发现 body 在设置了 overflow:hidden 后, 真的可以滚动(小伙伴都惊呆了).
确认跟代码没有任何关系, 是移动端浏览器本身的一个"特性", 我就放心了... (┬＿┬)
> iOS ignores overflow: hidden on the viewport.
> The browser reserves the right to show the content as a whole, no matter what you declare in the CSS.
> This is intentional and not a bug, and continues to be the case in iOS 7 and 8.
> There is nothing anyone can do about it, either - it can't be turned off.
要重现这个现象很简单, 只要在 body 中输入很多段内容, 然后设置样式 overflow:hidden 即可.
例如
<body sytle="overflow:hidden;">
<p>我是一个安静的段落</p>
......
<p>我是一个安静的段落</p>
</body>
单纯的读一下代码, 我们就可以预见在浏览器中页面是无法滚动的.
但真正在浏览器中查看这个页面, 事实告诉我们只猜对了一半.
* 在 PC 端浏览器上页面确实是无法滚动的
* 在移动端不管是 iOS 还是 Android, 页面却能够滚动, 而且确确实实是 body 在滚动
感觉这个"特性"还不错哦, 那么问题来了, 如果我们确实要禁止移动端 body 滚动怎么办?
其实也很简单, 只要让 html, body 都只有 100% 的高度, 然后再 overflow:hidden 即可.
> But you can work around it by making the body element itself, not the viewport, hide its overflow.
> There is one final gotcha to watch out for: the body itself must not be larger than the viewport.
html,
body {
height: 100%;
overflow: hidden;
}
/* elements which are positioned absolutely. */
/* Their ultimate offset parent is the viewport */
/* prevents those elements from breaking out of the body box. */
body {
position: relative;
}
完整代码请参考 body-ovh-on-mobile-device.html
参考
--------------
* overflow:hidden on body is broken in ios6
* Does overflow:hidden applied to <body> work on iPhone Safari?
但在 iPhone5 上打开这个页面, 却可以滚动? 匪夷所思啊~
于是开始排查代码, 以为是什么地方动态设置了 overflow:auto 之类.
然而排查一圈下来, 并没有任何发现(你一定是在逗我).
最终只好通过 weinre 远程调试, 发现 body 在设置了 overflow:hidden 后, 真的可以滚动(小伙伴都惊呆了).
 |
移动端 body overflow:hidden 后页面仍然可以滚动 |
确认跟代码没有任何关系, 是移动端浏览器本身的一个"特性", 我就放心了... (┬＿┬)
> iOS ignores overflow: hidden on the viewport.
> The browser reserves the right to show the content as a whole, no matter what you declare in the CSS.
> This is intentional and not a bug, and continues to be the case in iOS 7 and 8.
> There is nothing anyone can do about it, either - it can't be turned off.
要重现这个现象很简单, 只要在 body 中输入很多段内容, 然后设置样式 overflow:hidden 即可.
例如
<body sytle="overflow:hidden;">
<p>我是一个安静的段落</p>
......
<p>我是一个安静的段落</p>
</body>
单纯的读一下代码, 我们就可以预见在浏览器中页面是无法滚动的.
但真正在浏览器中查看这个页面, 事实告诉我们只猜对了一半.
 |
PC 端 body overflow:hidden 能禁止页面滚动 |
* 在 PC 端浏览器上页面确实是无法滚动的
* 在移动端不管是 iOS 还是 Android, 页面却能够滚动, 而且确确实实是 body 在滚动
感觉这个"特性"还不错哦, 那么问题来了, 如果我们确实要禁止移动端 body 滚动怎么办?
其实也很简单, 只要让 html, body 都只有 100% 的高度, 然后再 overflow:hidden 即可.
> But you can work around it by making the body element itself, not the viewport, hide its overflow.
> There is one final gotcha to watch out for: the body itself must not be larger than the viewport.
html,
body {
height: 100%;
overflow: hidden;
}
/* elements which are positioned absolutely. */
/* Their ultimate offset parent is the viewport */
/* prevents those elements from breaking out of the body box. */
body {
position: relative;
}
完整代码请参考 body-ovh-on-mobile-device.html
参考
--------------
* overflow:hidden on body is broken in ios6
* Does overflow:hidden applied to <body> work on iPhone Safari?
