弹出层时取消页面滚动

转载 2015年11月21日 14:18:26

原文地址:http://www.cnblogs.com/leejersey/p/4173566.html


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

一、去除滚动条方法

给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依然有效

前端页面弹框遮罩禁止页面滚动

前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息,在这个弹框弹出的同时,往往会伴有一个灰色的遮罩层挡住页面内容,同时整个页面被这层遮罩盖住,不可点击也不可滚动。...
  • yuhk231
  • yuhk231
  • 2017年07月03日 09:53
  • 2647

js 实现弹框后页面不滚动

现在有一个在wap网页上面的需求,就是点击用户相册的时候,弹出一个html层显示头像,再加上个半透明遮罩层,当用户滚动页面的时候,背景页面不能滚动,当用户再次点击图片隐藏弹框层后,页面恢复滚动,所有用...
  • ljihe
  • ljihe
  • 2016年08月18日 11:27
  • 2572

移动端弹出层滚动时禁止body滚动

移动端弹出层滚动时禁止body滚动 相信很多写移动端的朋友会遇到这个问题,我也遇到了,之后就辛辛苦苦的在网上找解决办法,下面我大概提一下我在网站遇到的几种办法,行不行的通呢?本人就亲测了下。如果有什...

弹出遮罩层后禁止滚动效果【实现代码】

jQuery

移动端弹出层弹出 body还能滚动(滚动穿透)

引用bootstrap的dialog组件,不过在移动端,dialog弹出,body还能滚动。 document.addEventListener('touchmove', function (even...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

modal 弹出层后禁止底层滚动

看到一篇不错的介绍由弹出层引发对滚动原理的讨论亲自实验的时候各种坑,都知道在web上处理很简单:html, body{ overflow: hidden; }1.这样只能解决web上的问题,移...

移动端js弹出层滚动的时候 body层不可滚动的解决办法

最近在做移动端网站,在点击导航栏,弹出导航列表时,出现了问题。下滑列表时底层body也跟着滚动,连查带想的折腾了两天才解决这个问题。下面主要分享一下解决办法以及关键代码。一、有的网友建议弹出层弹出时给...

Js弹出DIV遮罩层并在页面滚动居中显示效果

Js居中弹出遮罩层效果 *{margin:0;padding:0;} #bt{border: 2px solid #000;background-color: #ccc;cursor: poi...
  • jj88888
  • jj88888
  • 2014年03月03日 11:35
  • 1824

页面滚动时层智能浮动定位,jQuery/MooTools实现

一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:弹出层时取消页面滚动
举报原因:
原因补充:

(最多只允许输入30个字)