在写一个在页面中,经验证用户没有登录或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的内容,不过上面的做法更直观、更简单。

Html body的滚动条禁止与启用的更多相关文章

  1. SQL Server 禁止和启用约束

    Alter Table XXX nocheck constraint xxx Alter Table XXX check constraint xxx

  2. js禁止滚动条移动

    js禁止滚动条移动 var scrollFunc=function(e){ e=e||window.event; if (e&&e.preventDefault){ e.prevent ...

  3. 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果

    需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...

  4. Android ListView滚动条配置完全解析

    滚动条的相关显示效果 先来看下ListView的滚动条有哪些显示效果. 滚动条自身的外观 这点不用说,就是滚动条自身的颜色,形状等. Track的外观 默认的ListView是没有设置Track的.为 ...

  5. 【转】iOS学习之iOS禁止Touch事件

    iOS程序中有时会有需要禁止应用接收Touch的要求(比如动画进行时,防止触摸事件触发新方法). 一.一般有两种: 1.弄个遮罩层,禁止交互: 2.使用UIApplication中的方法进行相关的交互 ...

  6. 页面出现滚动条时,body里面的内容不能自动居中?

    弹窗后允许页面滚动 这种方式通常使用 position: absolute; ,可以看看我做的这个 Demo.主要用来应对弹窗内容很大很多的情况,超过了屏幕的宽高需要产生滚动条来方便浏览者查看.有一些 ...

  7. html里面用Jquery移除tr元素后,滚动条会回到顶部问题处理

    问题如下图,删除一行后,滚动条会自动回到顶部,即使先把滚动条禁止也还是会回到顶部 参考这个 https://bbs.csdn.net/topics/392233437 发现确实自己的按钮事件写在了a标 ...

  8. Windows Server 2003的一些优化设置 (转至网络)

    2003序列号:JCHKR-888KX-27HVK-DT88X-T767M1.禁用配置服务器向导: 禁止“配置你的服务器”(Manage Your Server)向导的出现:在控制面板(Control ...

  9. Angular2 表单

    1. 说明 表单是Web程序中的重要组成部分,构建良好以及实用的表单必须解决如下几个问题: (1). 如何跟踪及更新表单的数据状态 (2). 如何进行表单验证 (3). 如何显示表单验证信息 Angu ...

随机推荐

  1. Python pandas学习总结

    本来打算学习pandas模块,并写一个博客记录一下自己的学习,但是不知道怎么了,最近好像有点急功近利,就想把别人的东西复制过来,当心沉下来,自己自觉地将原本写满的pandas学习笔记删除了,这次打算写 ...

  2. R语言实战(三)——模拟随机游走数据

    一.模拟随机游走数据示例 x <- matrix(0,1000,1) for(i in 1:1000){ x[i+1] <- x[i]+rnorm(1) } plot(x,type=&qu ...

  3. LINQ分页和排序,skip和Take 用法

    LINQ分页和排序,skip和Take 用法 dbconn.BidRecord.OrderBy(p=>p.bid_id).ToList<BidRecord>().OrderBy(p ...

  4. 菜鸟入门【ASP.NET Core】3:准备CentOS和Nginx环境转(转)

    基本软件 VMware虚拟机 centos:http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minimal-170 ...

  5. music-api-next:一款支持网易、xiami和QQ音乐的JS爬虫库

    音乐,无界 让音乐无界 如果你苦于挑选一个全方位.多平台.简便易用的音乐爬虫库,music-api-next是不二选择. 特性: 支持网易.虾米和QQ三大主流音乐平台 支持音乐关键词搜索 支持音乐链接 ...

  6. 使用vue-cli开发过程中如何把jQuery设置为全局

    说明:vue-cli是vue快速构建项目的命令行式开发模式. vue主要针对数据层,更多的操作在数据上,很少在DOM上,偶尔也会需要操作DOM,偶尔也会用到JQ插件,下面简单说下如何在使用vue-cl ...

  7. Spring容器的初始化流程

    一.创建BeanFactory流程 1.流程入口 创建BeanFactory的流程是从refresh方法的第二步开始的,通过调用obtainFreshBeanFactory方法完成流程. Config ...

  8. Redis的五种数据类型的简单介绍和使用

    1.准备工作: 1.1在Linux下安装Redis  https://www.cnblogs.com/dddyyy/p/9763098.html 1.2启动Redis 先把root/redis的red ...

  9. ECMAScript正则表达式6个最新特性

    译者按: 还没学好ES6?ECMAScript 2018已经到来啦! 原文:ECMAScript regular expressions are getting better! 作者: Mathias ...

  10. 初学CSS-3-文字的属性

    文字样式属性: 格式:font-style:italic;/normal; 快捷键:fsi / fsn + tab键 文字粗细属性: 格式:font-weight:bold;/bolder;/ligh ...