html鎖定滾動條＿滾動條代碼

新聞 2020-08-01編輯：重慶網(wǎng)站建設(shè)標(biāo)簽： 滾動條代碼

html鎖定滾動條

<boby>里加入style="overflow-x:hidden"，可隱藏水平滾動條；加入style="overflow-y:hidden"，可隱藏垂直滾動條。 被包含頁面里加入 <style> html { overflow-x:hidden; } </style>
有一段解釋是這樣說的：body{ overflow-x:hidden; }在標(biāo)準(zhǔn) DTD 下是不可以的

另一種方法 <style type="text/css"> body { overflow-x:hidden; overflow-y:hidden; } </style>
<style type="text/css"> html { overflow-x:hidden; overflow-y:hidden; } </style>

<script type="text/javascript">

//鎖定滾動條
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});

//啟用滾動條
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});

</script>
我相信大家對這個代碼應(yīng)該無異議吧，如果有請高手給予指點。測試結(jié)果如下：
IE6：鎖定滾動條正常，啟動滾動條錯誤，出現(xiàn)雙滾動條且滾動條滾動頁面無反應(yīng)。
IE7：鎖定滾動條正常，啟動滾動條錯誤，出現(xiàn)雙滾動條且滾動條滾動頁面無反應(yīng)。
IE8: 鎖定滾動條正常，啟動滾動條正常。
IE9: 鎖定滾動條正常，啟動滾動條正常。
Chrome: 鎖定滾動條正常，啟動滾動條正常。
FireFox: 鎖定滾動條正常，啟動滾動條正常。

靠，又是IE6和IE7，微軟真的該反省了，所以說做產(chǎn)品得一開始就要負責(zé)人。別扯遠了，解決方法是當(dāng)overflow設(shè)置hidden以后，直接取消這個style而不要設(shè)置overflow，具體代碼如下：
//為了簡便定義一個樣式類
<style type="text/css">
.html-body-overflow
{
overflow-x:hidden;
overflow-y:hidden;
}
</style>

<script type="text/javascript">
//鎖定滾動條(默認是沒有附加這個樣式類的）
$(document.body).toggleClass("html-body-overflow");
//啟動滾動條
$(document.body).toggleClass("html-body-overflow");
</script>
當(dāng)然也可以直接清掉style的內(nèi)容，不過上面的做法更直觀、更簡單

• 上一章：html中滾動條屬性設(shè)置滾動條代碼scroll...
• 下一章：301重定向教程,301重定向設(shè)置方法