JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016-04-29 14:50
711 查看
一、去除滚动条方法
给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弹出层遮罩,隐藏背景页面滚动条细节优化分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- node.js抓取并分析网页内容有无特殊内容的js文件
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)