zoukankan      html  css  js  c++  java
  • Html body的滚动条禁止与启用

    在写一个在页面中,经验证用户没有登录或session失效时候弹出登录框禁止页面滚动用到
    今天搞了一个功能,上下左右居中,模仿QQ空间里的样式,把横向和纵向滚动条禁止掉代码如下:
    <script type="text/javascript">
     //禁止滚动条
     $(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的内容,不过上面的做法更直观、更简单。

  • 相关阅读:
    OpenLayer学习之图文标注
    HTML5制作时钟(canvas)
    ADO,NET中简单三层SQLHelper封装介绍
    OpenLayer学习之加载天地图
    ArcGIS Server manger管理页面无法打开问题解决
    Java EE (14) -- SSH配置
    R语言实战读书笔记(一)R语言介绍
    Machine Learning for hackers读书笔记_一句很重要的话
    Machine Learning for hackers读书笔记(十二)模型比较
    Machine Learning for hackers读书笔记(十)KNN:推荐系统
  • 原文地址:https://www.cnblogs.com/telwanggs/p/4834820.html
Copyright © 2011-2022 走看看