html鎖定滾動(dòng)條＿滾動(dòng)條代碼
新聞 2020-08-01編輯：重慶網(wǎng)站建設(shè)標(biāo)簽：
滾動(dòng)條代碼
html鎖定滾動(dòng)條
<boby>里加入style="overflow-x:hidden"，可隱藏水平滾動(dòng)條；加入style="overflow-y:hidden"，可隱藏垂直滾動(dòng)條。 被包含頁(yè)面里加入 <style> html { overflow-x:hidden; } </style>
有一段解釋是這樣說(shuō)的：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">
//鎖定滾動(dòng)條
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
//啟用滾動(dòng)條
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});
</script>
我相信大家對(duì)這個(gè)代碼應(yīng)該無(wú)異議吧，如果有請(qǐng)高手給予指點(diǎn)。測(cè)試結(jié)果如下：
IE6：鎖定滾動(dòng)條正常，啟動(dòng)滾動(dòng)條錯(cuò)誤，出現(xiàn)雙滾動(dòng)條且滾動(dòng)條滾動(dòng)頁(yè)面無(wú)反應(yīng)。
IE7：鎖定滾動(dòng)條正常，啟動(dòng)滾動(dòng)條錯(cuò)誤，出現(xiàn)雙滾動(dòng)條且滾動(dòng)條滾動(dòng)頁(yè)面無(wú)反應(yīng)。
IE8: 鎖定滾動(dòng)條正常，啟動(dòng)滾動(dòng)條正常。
IE9: 鎖定滾動(dòng)條正常，啟動(dòng)滾動(dòng)條正常。
Chrome: 鎖定滾動(dòng)條正常，啟動(dòng)滾動(dòng)條正常。
FireFox: 鎖定滾動(dòng)條正常，啟動(dòng)滾動(dòng)條正常。
靠，又是IE6和IE7，微軟真的該反省了，所以說(shuō)做產(chǎn)品得一開(kāi)始就要負(fù)責(zé)人。別扯遠(yuǎn)了，解決方法是當(dāng)overflow設(shè)置hidden以后，直接取消這個(gè)style而不要設(shè)置overflow，具體代碼如下：
//為了簡(jiǎn)便定義一個(gè)樣式類(lèi)
<style type="text/css">
.html-body-overflow
{
overflow-x:hidden;
overflow-y:hidden;
}
</style>
<script type="text/javascript">
//鎖定滾動(dòng)條(默認(rèn)是沒(méi)有附加這個(gè)樣式類(lèi)的）
$(document.body).toggleClass("html-body-overflow");
//啟動(dòng)滾動(dòng)條
$(document.body).toggleClass("html-body-overflow");
</script>
當(dāng)然也可以直接清掉style的內(nèi)容，不過(guò)上面的做法更直觀(guān)、更簡(jiǎn)單
