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 ...
随机推荐
- Maven教程(3)--Maven导入工程常见问题(编码、MavenArchiver、Lifecycle Mapping、maven install 没有反应)
常见错误: 常见错误一:These projects must be migrated to correctly function in this version of MyEclipse 需要修改编 ...
- Ubuntu安装与配置
四.ubuntu下生成ngrok服务器主程序 4.1.步骤与先决条件 如果你只是临时穿透或调试用,到第三步基本就可以了,但如果想作为稳定的商业服务,用别人的服务器还是受制于人,这里我们准备搭建自己的n ...
- hadoop fs,hadoop dfs,hdfs dfs
hadoop fs: FS relates to a generic file system which can point to any file systems like local, HDFS ...
- [PHP]算法-替换空格的PHP实现
替换空格: 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 思路: 1.先循环一遍,找出 ...
- 【原】通过BeanNameAutoProxyCreator改变臃肿代码
前言: 最近接手了一个项目,大概过了下需求,然后打开项目准备开搞的时候发现一个问题,这个项目是提供rest服务的一个web项目,其中很多旧系统由于还没改成微服务,所以只能通过HttpClient发起调 ...
- JS调用模式
在js中,一共4中调用方式.需要注意的是,调用方式中,this的指向问题. 函数调用模式 this丢失,debug会提示未定义相应属性.按照规范,需要将this赋值给that let myObj = ...
- github-SSH模式如何配置秘钥clone远程仓库以及分支切换
一.ssh模式clone 恕我无知,之前使用git命令都是https模式,该模式每次push都需要输入账号和密码,而且速度会根据的网速的快慢而定. 近日电脑重装了系统,在用SSH模式clone远程仓库 ...
- SQL Server 中的一些概念
学习SQL Server 2012编程入门经典(第4版)的笔记 1.事务日志 任意数据库的更改起初不进入数据库本身,而是不断地被写入到事务日志. 日志是数据进入磁盘上的最先位置. 2.表 数据库中实际 ...
- 【读书笔记】iOS-Web应用程序的自动化测试
seleniumHQ:https://github.com/seleniumhq/selenium Appium:https://github.com/appium/appium 参考资料:<i ...
- 【读书笔记】iOS-UI Automation 需要遵守的规则
1,被测试的应用程序必须是Developer签名的应用程序或者是运行在模拟器里面的应用程序. 2,在被测试的应用程序开发的过程中需要处理UI控件的可访问性.使用IB的开发工程师需要在XIB中加入一个A ...