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的内容，不过上面的做法更直观、更简单。

转载于:https://www.cnblogs.com/telwanggs/p/4834820.html

Html body的滚动条禁止与启用相关推荐

滚动条禁止_Axure 教程：不可见滚动条的页面滚动效果
在设计产品原型的过程中,经常会遇到这样的一种场景--所要展示的内容,超出了当前可视页面范围.遇到这种情况,通常使用Axure动态面板的滚动条设置来解决. 产品原型设计是产品经理每日或周期性必须经历的事 ...
vue滚动条禁止_vue弹窗后如何禁止滚动条滚动？
常见场景在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目.有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-index肯定是在 ...
vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...
vue滚动条禁止_vue中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 首先,我们打开我们的txt文本,开 ...
Linux查看、禁止、启用服务
本文以Centos7.6 x86_64为例,其它发行版本,可能略有不同 systemctl命令格式如下: systemctl [选项] [服务名称] systemctl命令可以使用enable/dis ...
计算机怎么禁止访问u盘,怎么禁止和启用U盘插入电脑后自动打开教程
如果你有使用U盘肯定遇到过有些电脑会自动打开U盘,而有些电脑却不会有任何反应,需要自己去我的电脑里打开U盘文件夹,这是怎么回事呢?我们怎么才能控制他们什么时候自动什么时候不打开呢?下面就教大家怎么做: ...
vue滚动条禁止_js禁止和开启滚动条事件
开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动:document.body.addEventListener('to ...
SkinSB皮肤滚动条库的使用
说明 SkinSB库能为Windows标准控件或制定控件设置自定义滚动条皮肤,从而去达到美化控件的目的,如果觉得原Windows滚动条样式无法与你的程序界面搭配的话,那么SkinSB能帮你轻松 ...
layui表格取消横向滚动条_layui滑动条如何隐藏
layui滑动条隐藏的方法:首先打开相应代码文件:然后通过"content: ['/home/index/echartTest?role=2&wd='+host,'no']" ...

Html body的滚动条禁止与启用

Html body的滚动条禁止与启用相关推荐

最新文章

热门文章