今天突然遇到一個問題，使用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作為一個單獨的隱藏類，更方便控制。