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

下面小编就为大家带来一篇 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; nbsp; //IE6bug ，子元素绝对定位后对于父元素的 padding 依然有 效 以上这篇 JS 弹出层遮罩 ,隐藏背景页面滚动条细节优化分析就是小编分享给大家的全部 内容了，希望能给大家一个参考