Html body的滚动条禁止与启用

今天搞了一个功能，上下左右居中，模仿QQ空间里的样式，把横向和纵向滚动条禁止掉代码如下：

 1 <script type="text/javascript">
 2 //禁止滚动条
 3 $(document.body).css({
 4   "overflow-x":"hidden",
 5   "overflow-y":"hidden"
 6 });
 7 
 8 //启用滚动条
 9 $(document.body).css({
10   "overflow-x":"auto",
11   "overflow-y":"auto"
12 });
13  

14 </script> 

     我相信大家对这个代码应该无异议吧，如果有请高手给予指点。测试结果如下：

     IE6：禁止滚动条正常，启动滚动条错误，出现双滚动条且滚动条滚动页面无反应。

     IE7：禁止滚动条正常，启动滚动条错误，出现双滚动条且滚动条滚动页面无反应。

     IE8: 禁止滚动条正常，启动滚动条正常。

     IE9: 禁止滚动条正常，启动滚动条正常。 

     Chrome: 禁止滚动条正常，启动滚动条正常。

     FireFox: 禁止滚动条正常，启动滚动条正常。

 

    靠，又是IE6和IE7，微软真的该反省了，所以说做产品得一开始就要负责人。别扯远了，解决方法是当overflow设置hidden以后，直接取消这个style而不要设置overflow，具体代码如下：

  1 //为了简便定义一个样式类

 2 <style type="text/css">
 3  .html-body-overflow
 4  {
 5    overflow-x:hidden;
 6    overflow-y:hidden;
 7  }
 8 </style>
 9 
10 <script type="text/javascript">
11  //禁止滚动条(默认是没有附加这个样式类的）
12  $(document.body).toggleClass("html-body-overflow");
13  //启动滚动条
14  $(document.body).toggleClass("html-body-overflow");
15 </script>

     当然也可以直接清掉style的内容，不过上面的做法更直观、更简单。