禁止 和 啟用 瀏覽器 滾動條
在寫一個在頁面中,經驗證使用者沒有登入或會話時候失效彈出登入框禁止頁面滾動用到
今天搞了一個功能,上下左右居中,模仿QQ空間裡的樣式,把橫向和縱向滾動條禁止掉程式碼如下:
<script type =“text / javascript”>
//禁止滾動條
$(document.body).css({
“overflow-x”:“hidden”,
“overflow-y”:“hidden”
});
//啟用滾動條
$(document.body).css({
“overflow-x”:“auto”,
“overflow-y”:“auto”
});
</ script>
我相信大家對這個程式碼應該無異議吧,如果有請高手給予指點。測試結果如下:
IE6:禁止滾動條正常,啟動滾動條錯誤,出現雙滾動條且滾動條滾動頁面無反應。
IE7:禁止滾動條正常,啟動滾動條正常。IE9
:禁止滾動條正常,啟動滾動條正常.EK9
:禁止滾動條正常,啟動滾動條正常
.Chrome:禁止滾動條正常,啟動滾動條正常。 禁止滾動條正常,啟動滾動條正常
.FireFox:
靠,又是IE6 IE7和,微軟真的該反省了,所以說做產品得一開始就要負責人。別扯遠了,解決方法是當溢位設定隱藏以後,直接取消這個風格而不要設定溢位,具體程式碼如下:
//為了簡便定義一個
樣式類<style type =“text / css”>
.html-body-overflow
{
overflow-x:hidden;
溢位-γ:隱藏;
}
</ style>
<script type =“text / javascript”>
//禁止滾動條(預設是沒有附加這個樣式類的)
$(document.body).toggleClass(“html-body-overflow”);
//啟動滾動條
$(document.body).toggleClass(“html-body-overflow”);
</ script>
當然也可以直接清掉style的內容,不過上面的做法更直觀,更簡單。