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的内容,不过上面的做法更直观、更简单。
Html body的滚动条禁止与启用的更多相关文章
- SQL Server 禁止和启用约束
Alter Table XXX nocheck constraint xxx Alter Table XXX check constraint xxx
- js禁止滚动条移动
js禁止滚动条移动 var scrollFunc=function(e){ e=e||window.event; if (e&&e.preventDefault){ e.prevent ...
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- Android ListView滚动条配置完全解析
滚动条的相关显示效果 先来看下ListView的滚动条有哪些显示效果. 滚动条自身的外观 这点不用说,就是滚动条自身的颜色,形状等. Track的外观 默认的ListView是没有设置Track的.为 ...
- 【转】iOS学习之iOS禁止Touch事件
iOS程序中有时会有需要禁止应用接收Touch的要求(比如动画进行时,防止触摸事件触发新方法). 一.一般有两种: 1.弄个遮罩层,禁止交互: 2.使用UIApplication中的方法进行相关的交互 ...
- 页面出现滚动条时,body里面的内容不能自动居中?
弹窗后允许页面滚动 这种方式通常使用 position: absolute; ,可以看看我做的这个 Demo.主要用来应对弹窗内容很大很多的情况,超过了屏幕的宽高需要产生滚动条来方便浏览者查看.有一些 ...
- html里面用Jquery移除tr元素后,滚动条会回到顶部问题处理
问题如下图,删除一行后,滚动条会自动回到顶部,即使先把滚动条禁止也还是会回到顶部 参考这个 https://bbs.csdn.net/topics/392233437 发现确实自己的按钮事件写在了a标 ...
- Windows Server 2003的一些优化设置 (转至网络)
2003序列号:JCHKR-888KX-27HVK-DT88X-T767M1.禁用配置服务器向导: 禁止“配置你的服务器”(Manage Your Server)向导的出现:在控制面板(Control ...
- Angular2 表单
1. 说明 表单是Web程序中的重要组成部分,构建良好以及实用的表单必须解决如下几个问题: (1). 如何跟踪及更新表单的数据状态 (2). 如何进行表单验证 (3). 如何显示表单验证信息 Angu ...
随机推荐
- Windows系统环境下创建mysql主从数据库方法(双向主从复制)
创建mysql主从数据库方法(双向主从复制) (一)Windows系统下的MySQL主从复制(单向复制) (1)环境说明: 1,Mysql版本:mysql5.7.20(主从机mysql版本必须一致) ...
- shiro教程1(HelloWorld)
shiro简介 官网 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动 ...
- Shiro学习总结(1)——Apache Shiro简介
1.1 简介 Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比springSecurity,可能没有Spring Securit ...
- C#实现微信AES-128-CBC加密数据的解密
小程序登录时,获得用户的信息,只是昵称,无法用作ID.而有用的数据,都加密着,腾讯给出了解密的方法: 加密数据解密算法 接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和un ...
- [Hadoop异常处理] Namenode和Datanode都正常启动,但是web页面不显示
异常 namenode和data都正常启动 但是web页面却不显示,都为零 解决办法一: 在hdfs-site.xml配置文件中,加入 <property> <name>dfs ...
- anaconda更新库命令
输入y更新库
- Linux 学习记录 四(Bash 和 Shell scirpt).
一.什么是 Shell? 狭义的shell指的是指令列方面的软件,包括基本的Linux操作窗口Bash等,广义的shell则包括 图形接口的软件,因为图形接口其实也可以操作各种驱动程序来呼叫核心进行工 ...
- 初学HTML-8
video标签:播放视频 格式一:<video src=""> </video> video标签的属性: src:用于告诉video标签需要播放的视频地址. ...
- blfs(systemv版本)学习笔记-编译安装sudo并创建普通用户配置sudo权限
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! blfs书中sudo的安装配置章节:http://www.linuxfromscratch.org/blfs/view/8.3/ ...
- python之类与类之间的关系
在我们的世界中事物和事物之间总会有一些联系. 在面向对象中. 类和类之间也可以产生相关的关系 1. 依赖关系 执行某个动作的时候. 需要xxx来帮助你完成这个操作. 此时的关系是最轻的. 随时可以 ...