html锁定滚动条＿滚动条代码
新闻 2024-9-22编辑：深圳网站建设阅读（）标签：
滚动条代码
html锁定滚动条
<boby>里【lǐ】加入style="overflow-x:hidden"，可【kě】隐藏水平滚动条；加【jiā】入style="overflow-y:hidden"，可【kě】隐【yǐn】藏垂直滚动【dòng】条。 被包含页面里加入 <style> html { overflow-x:hidden; } </style>
有一段解释【shì】是这【zhè】样【yàng】说的：body{ overflow-x:hidden; }在标准 DTD 下是不可【kě】以的【de】
另一种【zhǒng】方法 <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>
我【wǒ】相信大家对这【zhè】个代码应该【gāi】无【wú】异议【yì】吧，如果有【yǒu】请高手给予指点。测试结果如【rú】下：
IE6：锁定滚动条【tiáo】正常，启【qǐ】动【dòng】滚动条【tiáo】错误，出现双滚动条且滚动【dòng】条滚动页面无反应。
IE7：锁定滚动条【tiáo】正常，启动【dòng】滚【gǔn】动条【tiáo】错误，出现双【shuāng】滚动条且滚动【dòng】条滚动页面无【wú】反应。
IE8: 锁定滚动条正常，启动滚动条正常。
IE9: 锁定滚动条正常，启动滚动条正常。
Chrome: 锁定滚动条正常，启动滚动条正常。
FireFox: 锁定滚动条正常，启动滚动条正常。
靠【kào】，又【yòu】是IE6和IE7，微软真【zhēn】的【de】该反省了，所以说做产品得一开始就要【yào】负责人。别【bié】扯远了，解【jiě】决方法是当overflow设【shè】置hidden以后，直接取消这个style而【ér】不要设置【zhì】overflow，具【jù】体【tǐ】代码如下：
//为了简便定义一个样式类
<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>
当然也可以直接清掉style的内容【róng】，不【bú】过上面的【de】做法更【gèng】直观、更简【jiǎn】单
