JS弹出层遮罩,隐藏背景页面滚动条细节优化分析


Posted in Javascript onApril 29, 2016

一、去除滚动条方法

给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性

样式中需要对IE6、7及其它浏览器用hack辨别,这是因为当页面拉到下面时如果html或body被overflow:hidden,透明弹层下面的页面就会被部分正常隐藏,通过透明看到的一片的灰度,具体颜色跟平台及用户设置背景色有关。

body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下右padding,大小为滚动条的宽度。windows平台下滚动条的宽度为17px,linux平台下不同滚动器滚动条宽度不一致,可以用相关代码计算出滚动条的宽度,以下以windows平台为例。

相关代码:

document.documentElement.style.cssText = ‘overflow:none;+overflow:hidden;_overflow:hidden;';
document.body.style.cssText = ‘overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;';

以上代码不考虑html或body是否有内联样式 ,如果html或body有内联样式则需要累加,否则会清空原有样式。

二、去除隐患其它方法滚动页面(防止误操作)

隐藏滚动条后,用鼠标滚轮滚动页面确实不会动了,以为这就ok了,不是…

键盘快捷键也可以操作浏览器的一些操作,与滚动页面相关的,比如:上下按键、翻页按键等。针对键盘快捷键,需要取消他们的默认操作。

三、添加弹出层样式

给body添加全局样式(兼容IE6)

height:100%;

给弹层添加滚动样式

overflow-y: auto;
width: 100%;
height: 100%;
left:0;
_padding:0 17px 0 0;   //IE6bug,子元素绝对定位后对于父元素的padding依然有效

以上这篇JS弹出层遮罩,隐藏背景页面滚动条细节优化分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 扩展方法
May 06 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
js 处理URL实用技巧
Nov 23 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 #Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 #Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 #Javascript
Bootstrap实现下拉菜单效果
Apr 29 #Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 #Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 #Javascript
JS组件Bootstrap导航条使用方法详解
Apr 29 #Javascript
You might like
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
破解Session cookie的方法
2006/07/28 Javascript
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
详解JavaScript作用域和作用域链
2019/03/19 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python帮你识破双11的套路
2019/11/11 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
物流专业求职信
2014/06/30 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
小浪底导游词
2015/02/12 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
德劲DE1105机评
2022/04/05 无线电