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 ...
随机推荐
- 如何在线显示php源代码
通过php提供的函数highlight_file和highlight_string实现
- SpringBoot(3) 文件上传和访问
springboot文件上传 MultipartFile file,源自SpringMVC MultipartFile 对象的transferTo方法,用于文件保存(效率和操作比原先用FileOutS ...
- Linux 下 rt3070 无线网卡找不到 firmware 问题
解决办法: 下载好固件 rt2800.bin 文件,复制到 /lib/firmware 中 如果完成以上步骤后,运行 ifconfig wlan0 up 仍然提示 phy0 -> rt2x00l ...
- c#:HttpClient加标头
using (var client = new HttpClient()) { string requestUrl = string.Format("{0}{1}", ConstD ...
- Python全栈学习_day002作业
Day2作业及默写 1.判断下列逻辑语句的True,False. 1)1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 & ...
- 微信小程序 封装请求
在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装. 1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装) ...
- 教你读懂vue源码技术教程
由于 Vue 的源码采用 ES6,所以你至少应该掌握 ES6 才能看得懂,其次你最好对 package.json 中的字段的作用有所了解.由于 Vue 使用 Rollup 构建,所以你不了解 Roll ...
- 【代码笔记】Web-HTML-基础
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 【读书笔记】iOS-使用蓝牙
蓝牙是由Sony Ericsso公司研发出来的,它是一种无线通讯协议,主要用于短程和低耗电设备,其有效通讯范围约30ft,传输速度为1MB/s.与Wifi设计初衷不同,蓝牙适用于无线的外围设备,进行小 ...
- 【读书笔记】iOS-强类型与弱类型
id类型是一个通用类型,OC使用id表示任意类型的对象,它可以作为一个占位符表示这是一个不确定的类型的对象或者引用.因此,所有的对象都 可以用id来表示.这很有用,想象一下,如果你需要实现一个通用的链 ...