PC端解决方案

pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果。

也就是说给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性。

要制作这个效果在PC端非常简单,只需要设置html的高度为100%占满屏幕,并且将html的overflow设置为hidden,即可保证页面不可滚动。

但是同样的问题在移动端情况就有所区别。仅仅设置html的上列属性,在移动端仍然无法禁止页面超出部分的滚动,我们需要设置下面的代码才能在弹框出现的时候禁止页面滚动:

html.style.overflow="hidden";

html.style.height="100%";

body.style.overflow="hidden";

body.style.height="100%";

原因是因为移动端是基于touch事件,要禁止基于touch事件的滚动,我们必须在对html禁止滚动的基础之上,再将需要禁止滚动的内容上再增加一个包裹层块级元素,然后将这个包裹层块级元素高度设置为100%并设置overflow:hidden;,那么在这里我们认为body包裹了整个页面,正是我们需要的块级元素,将他也设置为禁止滚动,就可以保证移动端页面的滑动时间不会触发页面滚动。

当用户关闭了弹框,页面也就恢复正常,我们设置如下CSS样式属性来还原整个页面的滚动效果:

html.style.overflow="visible";

html.style.height="auto";

body.style.overflow="visible";

body.style.height="auto";

这些样式正是对应CSS属性的默认样式。

然而这个方案有一个缺陷,就是ios系统下不兼容,黑幕的效果没法阻止页面的滚动。下面介绍移动端的另一种解决方案。

移动端解决方案

正是因为移动端的滚动基于屏幕的touch事件,因此诞生了方案二(手机淘宝就使用了这种方案)。

首先我们需要知道两个前提知识点:1、重叠的两个页面元素,z-index值更高的会优先触发事件监听,从而可以在此控制是否让事件流继续;2、移动端滚动的touch事件,基于事件流。

有了上面两个知识点的基础,我们就可以来理解这种方案的设计思路。方案二的原理是:不对原页面进行任何改动,仅仅只是用一个拥有更高z-index值的,布局为absolute或者fixed布局的黑幕(长宽100%)来挡住整个页面,并且监听黑幕的touchmove事件,在touchmove事件内结束事件流,从而阻挡事件流继续。这样,能够产生滚动效果的touch事件就传不到页面上,也就不会发生滚动。

移动端取消滚动条是达不到效果的,这时就需要去除遮罩层和按钮层的touchmove的默认事件,代码如下:

mask.addEventListener("touchmove",function(e){

e.stopPropagation();

e.preventDefault();

},false);

后来我把e.stopPropagation()注释了,没有禁止事件冒泡,在遮罩弹出后touchmove以为页面应该会滚动,但是页面还是不滚动。然后我在页面加了

document.getElementsByTagName(‘body’)[0].addEventListener("touchmove", function(){
   alert(‘hello’);
})

;遮罩弹出后,手指touchmove滑动页面不会滚动,但是会alert(‘hello’);,说明事件还是冒泡了,只是touchmove没有传到页面上。猜测可能是这个原因,touchmove事件只针对第一次触发的最上层的容器,而不会冒泡传递。

移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究的更多相关文章

  1. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  2. jquery特效(7)—弹出遮罩层且内容居中

    上周写了几个小特效,其中有个点击按钮弹出遮罩层的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html&g ...

  3. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

  4. electron app弹出默认对话框后页面失去焦点问题

    最近再做electron app程序的做删除数据操作的时候遇到一个诡异的bug,页面点击删除按钮后,弹出确认对话框后,页面失去焦点,文本框无法点击输入任何参数,但是使用浏览器操作正常,最后确定是ele ...

  5. JS 点击按钮后弹出遮罩层,有关闭按钮

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

  6. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

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

  7. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

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

  8. HTML 弹出遮罩层二(遮罩层和内容标签分开)

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

  9. jQuery弹出遮罩层效果完整示例

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

随机推荐

  1. bat 实现主机hostname的修改

    主机实现hostname的修改原理: 修改注册表中的值: hklm\SYSTEM\CurrentControlSet\Control\ComputerName\ComputerName 下的 Comp ...

  2. Windows Server 2016-MS服务器应用程序兼容性列表

    该表罗列支持 Window Server 2016 上安装和功能的 Microsoft 服务器应用程序. 此信息用于快速参考,不用于替代有关单个产品的规格.要求.公告或每个服务器应用程序的常规通信的说 ...

  3. Visual Studio Code-批量在文末添加文本字段

    小技巧一例,在vs code或notepad++文末批量添加文本字段信息,便于数据信息的完整,具体操作如下: Visual Studio Code批量添加"@azureyun.com&quo ...

  4. jdbc连接数据库,中文出现乱码的问题

    一.使用jdbc连接数据库,插入数据库时,数据里的数据显示乱码,为 " ??? " 两种解决方案: 1.修改服务端的mysql配置文件,编辑my.cnf文件,在[mysqld]下添 ...

  5. 5个常常被大家忽略的Python小技巧

    下面我挑选出的这几个技巧常常会被人们忽略,但它们在日常编程中能真正的给我们带来不少帮助. 1. 字典推导(Dictionary comprehensions)和集合推导(Set comprehensi ...

  6. MySQL中的自适应哈希索引

    众所周知,InnoDB使用的索引结构是B+树,但其实它还支持另一种索引:自适应哈希索引. 哈希表是数组+链表的形式.通过哈希函数计算每个节点数据中键所对应的哈希桶位置,如果出现哈希冲突,就使用拉链法来 ...

  7. 使用 Moq 测试.NET Core 应用 -- Mock 属性

    第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html 第二篇文章, 关于方法Mock的介绍: https://www.cnbl ...

  8. Android序列化

    1.序列化的目的 (1)永久的保存对象数据(将对象数据保存在文件当中,或者是磁盘中 (2)通过序列化对象在网络中传递对象 (3)通过序列化对象在进程间传递 (4)在Intent之间,基本的数据类型直接 ...

  9. 【大数据安全】Apache Kylin 安全配置(Kerberos)

    1. 概述 本文首先会简单介绍Kylin的安装配置,然后介绍启用Kerberos的CDH集群中如何部署及使用Kylin. Apache Kylin™是一个开源的分布式分析引擎,提供Hadoop/Spa ...

  10. k8s应用机密信息与配置管理(九)--技术流ken

    secret 应用启动过程中可能需要一些敏感信息,比如访问数据库的用户名密码或者秘钥.将这些信息直接保存在容器镜像中显然不妥,Kubernetes 提供的解决方案是 Secret. Secret 会以 ...