滚动条的显示或隐藏

禁止或启动横向和纵向滚动条的代码脚本如下(要那个就调用那个)

<script type="text/javascript">
 //禁止滚动条
 $(document.body).css({  "overflow-x":"hidden", "overflow-y":"hidden" });
 //启用滚动条

// $(document.body).css({ "overflow-x":"auto","overflow-y":"auto"});

//$("html").css(......);  / $("body").css(......);这样也可以的

</script> 

或 需要单个的可以这样

<script type="text/javascript">

 //禁止滚动条

 $(document.body).css("overflow-x","hidden");

 //$(document.body).css("overflow-y","hidden");

 //启用滚动条

 //$(document.body).css( "overflow-x","auto");

 //$(document.body).css( "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的内容,不过上面的做法更直观、更简单。

我只是搬砖的,哈哈,来源:https://www.cnblogs.com/love540376/p/4834820.html

猜你喜欢

转载自blog.csdn.net/qq_41408081/article/details/80361350