ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

纯CSS属性pointer-events:none解决滚动穿透问题

2020-04-24 09:57:47  阅读:244  来源: 互联网

标签:遮罩 none 滚动 事件 pointer events 弹窗


·什么是滚动穿透:

在移动端的前端开发中,我们常常会用到Modal弹窗,又称模态框,用来在已有页面显示新的选项、提示或新内容。遮罩层常出现在弹窗后,用来在视觉上,帮助用户集中注意力,功能上,防止用户继续操作页面上的其他内容。遮罩层通常是一个绝对定位,宽高充满内容区域或可视区域,层级略低于弹窗的具有一定透明度的背景。

在Web端,我们只需要通过CSS设置上述属性,就可以完成实现“遮罩实现”的功能,但当用户使用鼠标滚轮,或者在移动端,通过手指滑动时,我们发现:

位于遮罩层背后的内容,穿透了我们设置的遮罩层,跟随用户的操作发生滚动。这种现象,就被称为“滚动穿透”。

·你可能会想到的解决滚动穿透问题的方法:

看到这种由非直接目标对象响应事件的现象,很多人都会想到 Js的事件处理机制,进而想到,阻止事件冒泡,避免对Modal弹窗层的操作,冒泡到遮罩层下。

然而这种思路并不总是行得通,冒泡的前提,是两个对象具有父子关系,事件从子对象传递到父对象,然而我们的弹出层经常被直接append到body或根节点中,与原有内容在一个层级,用阻止冒泡的方法并不能达成目的。

事实上,位于遮罩层下方的可滚动元素和上方的弹出层,由于重叠,直接响应了用户的操作,而不是接受上层的事件传递。

那我们可不可以阻止默认事件呢?

通过preventDefault()阻止默认事件,任何通常被该实现触发并作为结果的默认行为都不会发生,上层和下层元素的默认滚动行为都将被阻止,这显然并不是我们想要的。

此外,还有很都方法,通过十几行甚至几十行代码,在移动端,阻止滚动穿透,有点大材小用啦。

·化繁为简,一行CSS3属性解决滚动穿透问题

让我们先认识这个CSS3属性 pointer-events,它的默认属性值是auto,而对于前端开发,另一个值 none,显然更有用。通过设置:

 

pointer-events: none

> 元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

 

将MDN的解释形象化,你可以把设置 pointer-events: none 看成一张透明纸,它本身不再响应鼠标事件(事实上,也包括移动的手指触摸Touch事件),却可以传递事件,让事件穿过它自己,继续传到父级。

 

简而言之,我们想让哪层不滚动,只需要给这层设置 pointer-events: none 。

配合弹窗的状态,当弹窗显示的时候,给位于遮罩层底下的图层设置  pointer-events: none ,当弹窗隐藏/关闭的时候,设置  pointer-events: auto ,或者干脆移除这个属性。

 

pointer-events 是一个比较早公布的CSS3属性,在Web端和移动端都有良好的支持度:

 

  CSS3的属性pointer-events的浏览器和移动端兼容性图示 CSS3的属性pointer-events的浏览器和移动端兼容性图示

标签:遮罩,none,滚动,事件,pointer,events,弹窗
来源: https://www.cnblogs.com/ygunoil/p/12765420.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有