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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 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
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
js 处理URL实用技巧
2010/11/23 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
padas 生成excel 增加sheet表的实例
2018/12/11 Python
numpy数组广播的机制
2019/07/12 Python
Python 变量的创建过程详解
2019/09/02 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
Python 读取位于包中的数据文件
2020/08/07 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
财产公证书样本
2014/04/04 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
教师个人总结范文
2015/02/11 职场文书
给病人的慰问信
2015/03/23 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL