移动端浏览器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作为一个单独的隐藏类，更方便控制。
