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弹出层遮罩,隐藏背景页面滚动条细节优化的更多相关文章
- js弹窗 js弹出DIV,并使整个页面背景变暗
1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...
- js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...
- 简单 JS 弹出层 背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 弹出层,以及在javascript里定义层样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.blockUI.2.31.js 弹出层项目介绍
{insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...
- div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- layer弹出层传值到父页面
目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).r ...
- js弹出层的写法实例
点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...
- JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
随机推荐
- Windows 10官方原版ISO制作方法
其实市面上的ISO原版都是这样的方法制作成光盘,然后再打包出来供人们下载的. 1.下载Windows 10安装程序工具: https://www.microsoft.com/zh-cn/softwar ...
- DevOps 解决方案 - 腾讯云
DevOps 解决方案 - 腾讯云 https://cloud.tencent.com/solution/devops?from=qcloudHpHeaderDevops
- 【Oracle】-【LRU和DBWR】-LRU算法与DBWR中的应用
Oracle体系结构中经常看到LRU算法,Least Recently Used,也有叫“最近最少使用页面置换算法”,简单讲,Oracle会将内存中最近不用的数据库移出内存以腾出空间来加载另外的数据. ...
- Programming 2D Games 读书笔记(第二章)
本意还是想了解DirectX的,由于网上拿不到书的pdf文档,幸好有作者的源代码示例,想完整的看一下,基本的游戏需要的点. 下面直接以代码为例,仅用于帮助自身理解 http://www.progr ...
- Visual Studio 2012 调试程序加载缓慢,提示正在下载符号
当在Visual Studio 2012中调试程序的时候,整个过程加载缓慢,并且有类似"正在下载符号......"的提示. 这是因为Visual Studio在调试的时候,默认从M ...
- ASP.NET Web API实践系列05,消息处理管道
ASP.NET Web API的消息处理管道可以理解为请求到达Controller之前.Controller返回响应之后的处理机制.之所以需要了解消息处理管道,是因为我们可以借助它来实现对请求和响应的 ...
- sql语句练习题
6.Mysql不要用top用limit 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时候怎么办呢? 查找时Mysql不能用top,反正我用不了,查了下可以用limit来替换. 比 ...
- iOS: 计算 UIWebView 的内容高度
- (void)webViewDidFinishLoad:(UIWebView *)wb { //方法1 CGFloat documentWidth = [[wb stringByEvaluating ...
- Informix存储过程
一.存储过程概述 存储过程是一个用户定义的函数,由存储过程语句(SPL) 和一组SQL语句组成,以可以执行代码形式存储在数据库中,和表.视图.索引等一样,是数据库的一种对象. 存储过程语言SPL(St ...
- 安装GCC-4.6.1详细教程
一.什么是Gcc Linux系统下的Gcc(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器,是GNU的代表作品之一.gcc是可以在多种硬体平台上编译出可执行程序的超级编译 ...