JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
更新时间：2016年04月29日 14:50:38 投稿：jingxian
下面小编就为大家带来一篇JS弹出层遮罩,隐藏背景页面滚动条细节优化分析。小编觉得挺不错的，现在分享给大家，也给大家做个参考
一、去除滚动条方法
给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中,处理数字并格式化它们以显示特定的小数位数是一个常见的需求,特别是,当你需要显示货币、测量值或其他需要精确到两位小数的数据时,本文将详细介绍几种在JavaScript中实现保留两位小数的方法,需要的朋友可以参考下2024-11-11
下面小编就为大家带来一篇浅谈Javascript中的函数、this以及原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了URL中“#” “？” &“”号的作用浅析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要给大家介绍了关于原生微信小程序中封装一个模拟select下拉框组件的相关资料,文中介绍了如何在小程序中创建和使用自定义组件van-select,包括组件的创建步骤和在页面中的应用方法,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了JavaScript设计模式手写示例，设计模式（Design pattern） 是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好2022-12-12
这篇文章主要为大家详细介绍了js实现内容显示并使用json传输数据的方法，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章给大家分享了关于js中时间格式化的几种方法，有需要的朋友们可以参考学习下。2018-07-07
如 TypeScript 官方文档所说，枚举类型是对 JavaScript 标准数据类型集的扩充,所以下面这篇文章主要给大家介绍了关于TypeScript中枚举类型的理解与应用场景的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了JavaScript中return false的用法,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS对象数组中如何匹配某个属性值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论