做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。

一、去除滚动条方法
给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弹出层遮罩,隐藏背景页面滚动条细节优化的更多相关文章

  1. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  2. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  3. 简单 JS 弹出层 背景变暗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js 弹出层,以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  6. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. layer弹出层传值到父页面

    目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).r ...

  8. js弹出层的写法实例

    点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...

  9. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

随机推荐

  1. RelativeLayout 高度宽度

    RelativeLayout ss = (RelativeLayout) findViewById(R.id.myRelativeLayout); ss.setLayoutParams(new Rel ...

  2. NOIP 2013 转圈游戏

    [题目描述] n个小伙伴(编号从 0 到 n−1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从 0 到 n−1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置,……, ...

  3. Slickflow.NET 开源工作流引擎基础介绍(十) -- 邮件轮询异步发送模块集成

    前言:在任务数据生成时,为了让办理任务的用户及时获取到待办任务的主题和内容,需要发送通知类的消息,而电子邮件和手机端的短信通知则是比较普通的消息发送.本文是针对电子邮件异步发送模块的实现来做实例说明. ...

  4. spring集成kafka

    一.添加依赖项 compile 'org.springframework.kafka:spring-kafka:1.2.2.RELEASE' 二.发消息(生产者) 2.1 xml配置 <?xml ...

  5. HDU 4788 Hard Disk Drive (2013成都H,水题)

    Hard Disk Drive Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  6. Cygwin、MinGw、mingw-w64,MSys msys2区别与联系

    https://www.biaodianfu.com/cygwin-ming-msys.html http://www.mingw-w64.org/doku.php http://blog.csdn. ...

  7. CefSharp 在同一窗口打开链接的方法

    摘要 在winform中使用cefsharp的时候,我们在浏览网页的时候,想在同一个窗口打开链接,而不是创建新的窗口.可以通过下面的方法实现. 解决方案 CefSharp 中控制弹窗的接口是 ILif ...

  8. redis缓存web session

    redis缓存web session 首先说下架构图.使用Redis作为会话服务器,统一管理Session.如图,集群里的WEB服务器共享存放在REDIS里面全部的客户端SESSION. 当然,反向代 ...

  9. uifont 字体详解

    时间2013-06-04 11:26:33 CSDN博客原文  http://blog.csdn.net/u010013695/article/details/9020611 我们在开发中很多时候要设 ...

  10. iOS本地化应用程序

    因为使用的是xcode4,应用程序本地化的问题跟以前的版本还是有些不同,在网上找了些资料对于xcode4以上的版本资料还是相对较少,有些最后要通过手动创建文件,这样操作实在是太麻烦,所以经过一个下午的 ...