移动端浏览器body的overflow:hidden并没有什么作用
生活随笔
收集整理的這篇文章主要介紹了
移动端浏览器body的overflow:hidden并没有什么作用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天突然遇到一個問題，使用li模擬select，但是碰到一個很尷尬的問題，給body加了overflow:hidden，但是body并沒有禁止滾動條，滾動條依舊順滑。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> body{overflow:hidden;height:100%;} .box{height:2000px;background:red;} </style> </head><body> <div class="box"> 1<br /> 2<br /> 3<br /></div> </body> </html>雖然設定了高度100%，即使設置一個固定的像素值，也禁止不了滾動條，于是百度好久也沒找到答案，最后找別人討論到了。
三種解決方案
1、body加position:fixed;width:100%;height:100%。
2、給要滾動的元素添加一個父級，設定高度，overflow：auto；
3、html,body{height:100%;overflow:hidden}
建議使用第三種，可以把overflow:hidden作為一個單獨的隱藏類，更方便控制。
?
轉載于:https://www.cnblogs.com/lbcheng/p/6044303.html
總結
以上是生活随笔為你收集整理的移动端浏览器body的overflow:hidden并没有什么作用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【bzoj 2435】[Noi2011]
- 下一篇： 搜狗浏览器也可以直接安装Chrome插件