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弹出层遮罩,隐藏背景页面滚动条细节优化分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
HTML中setCapture、releaseCapture 使用方法浅析
本文给大家简单介绍了下html中的高级拖动技术setCapture、releaseCapture的使用方法,有需要的小伙伴可以参考下2016-09-09Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
这篇文章主要给大家介绍了关于Bootstrap标签页(Tab)插件切换echarts不显示问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2018-07-07js中net::ERR_FILE_NOT_FOUND报错的解决
本文主要介绍了js中net::ERR_FILE_NOT_FOUND报错的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-07-07JavaScript hasOwnProperty() 函数实例详解
hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。下面通过本文给大家分享JavaScript hasOwnProperty() 函数实例讲解,感兴趣的朋友一起看看吧2017-08-08
最新评论