弹出层时取消页面滚动
2015-11-21 14:18
281 查看
原文地址:http://www.cnblogs.com/leejersey/p/4173566.html
做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。
样式中需要对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有内联样式则需要累加,否则会清空原有样式。
键盘快捷键也可以操作浏览器的一些操作,与滚动页面相关的,比如:上下按键、翻页按键等。针对键盘快捷键,需要取消他们的默认操作。
height:100%;
给弹层添加滚动样式
overflow-y: auto;
width: 100%;
height: 100%;
left:0;
_padding:0 17px 0 0; //IE6bug,子元素绝对定位后对于父元素的padding依然有效
做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。
一、去除滚动条方法
给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依然有效
相关文章推荐
- NHibernate 慎用Session.Merge
- Eclispe环境启动遇This Android SDK requires Android Developer Toolkit version 23.0.0 or above
- iOS--输入银行卡号的时候,对数字格式化,每四个数后面加个“-”
- C++设计模式之备忘录模式
- RESTful API 设计指南
- servlet&jsp 输入输出流
- Mac brew安装
- c语言-进程之间通信
- 选项卡切换
- canvas的一些有用的使用小结
- KnockOut JS 学习中遇到的几个问题
- date命令报错
- nginx日志切割
- js实现索引图片切换效果
- SWUST大二周赛 之农夫山泉有点甜
- 总结nonatomic,assigncopy,retain
- 读“徐宥”
- java变量
- iOS9—xcode7常见错误https问题解决
- 需要清除memcach缓存方能解决的几个报错