html锁定滚动条＿滚动条代码-深圳网商在线网站建设公司

您的位置：首页 > 新闻

html锁定滚动条＿滚动条代码

新闻 2020-08-01编辑：深圳网站建设阅读（）标签：滚动条代码

html锁定滚动条

<boby>里加入style="overflow-x:hidden"，可隐藏水平滚动条；加入style="overflow-y:hidden"，可隐藏垂直滚动条。被包含页面里加入 <style> html { overflow-x:hidden; } </style>
有一段解释是这样说的：body{ overflow-x:hidden; }在标准 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>

//锁定滚动条
$(document.body).css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});

//启用滚动条
$(document.body).css({
"overflow-x":"auto",
"overflow-y":"auto"
});

</script>
我相信大家对这个代码应该无异议吧，如果有请高手给予指点。测试结果如下：
IE6：锁定滚动条正常，启动滚动条错误，出现双滚动条且滚动条滚动页面无反应。
IE7：锁定滚动条正常，启动滚动条错误，出现双滚动条且滚动条滚动页面无反应。
IE8: 锁定滚动条正常，启动滚动条正常。
IE9: 锁定滚动条正常，启动滚动条正常。
Chrome: 锁定滚动条正常，启动滚动条正常。
FireFox: 锁定滚动条正常，启动滚动条正常。

靠，又是IE6和IE7，微软真的该反省了，所以说做产品得一开始就要负责人。别扯远了，解决方法是当overflow设置hidden以后，直接取消这个style而不要设置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>
当然也可以直接清掉style的内容，不过上面的做法更直观、更简单