【CSS】自定义遮罩层下出现页面穿透及滚动解决方案

已于 2023-12-11 11:09:59 修改
阅读量2k 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
于 2023-06-26 15:28:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45481971/article/details/131398521
版权
在开发中遇到自定义遮罩层时，可能会导致下方页面依然可滚动。文章提出了三种解决方案：一是通过@touchmove事件阻止页面滑动；二是显示遮罩层时设置页面高度为100vh，隐藏时恢复；三是利用page-meta标签的style属性设置overflow:hidden来禁止滚动，但此方法只适用于真机，不适用于某些内置浏览器。
摘要由CSDN通过智能技术生成

背景

当我们写自定义遮罩层时，下方的页面会出现滚动或者穿透

解决方案

一 、@touchmove.stop.prevent=“moveHandle” 禁止页面滑动
二、遮罩层显示时, 底部页面高度设置100vh，隐藏时取消高度设置
三、使用page-meta标签, style属性, < page-meta page-style=“overflow:hidden”></ page-meta>, 该方法仅针对真机, hbx内置浏览器不生效, 当允许页面滚动时 page-style=“” 优点 : 不限制页面高度

代码x手莓莓
关注
专栏目录
解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况
男神的专栏
02-29 2419
这时，我们可以通过记录用户打开弹窗前所滚动页面的位置，在弹层展开的时候赋给body在css中的top值，等关闭弹层的时候，再把这个值赋值给body在js中的scrollTop值，还原body的滚动位置。2、touchmove手势移动的时候，再次获取最新的坐标点y的值y2，（其实记录可滚动区域的可滚动高度、当前滚动距离等可以在一开始就记录，我这里写到了touchmove里，还可以再优化）。当弹层出现的时候不需要再禁掉body的滚动效果了，我们可以从弹层方面入手，阻止弹框的touchmove事件的默认行为。
vue解决弹出蒙层滑动穿透问题的方法
10-17
主要介绍了vue解决弹出蒙层滑动穿透问题的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
自定义弹窗禁止底部页面内容滑动（禁止穿透）
最新发布
JavaScritp
06-25 242
在弹窗的外部盒子上加上 @touchmove.stop.prevent=“moveHandle”定义方法 moveHandle。
纯CSS属性pointer-events：none解决滚动穿透、事件穿透问题
ygunoil的博客
04-24 201
·什么是滚动穿透： 在移动端的前端开发中，我们常常会用到Modal弹窗，又称模态框，用来在已有页面显示新的选项、提示或新内容。遮罩层常出现在弹窗后，用来在视觉上，帮助用户集中注意力，功能上，防止用户继续操作页面上的其他内容。遮罩层通常是一个绝对定位，宽高充满内容区域或可视区域，层级略低于弹窗的具有一定透明度的背景。 在Web端，我们只需要通过CSS设置上述属性，就可以完成实现“遮罩实现”的功能，...
遮罩层内的元素滚动时不让遮罩层底下的元素滚动的办法
qq_39174318的博客
05-21 457
打开遮罩层的时候, 获取body元素的样式, 然后设置position为relative;overflow为hidden;这样页面就不会滚动了, 但是遮罩层可以滚动, 这里是从。知道的, 但是文中说, 如果给body设置了这俩样式属性后, 不管遮罩内的还是遮罩底下的都不会滚动, 但是实际操作发现, 遮罩内的会滚动, 遮罩底下的不会滚动.H5端目录列表的遮罩层在遮挡住文章内容后, 滚动目录列表会引起文章内容的滚动. 想要的效果打开目录列表遮罩层时仅目录列表滚动.
这一次，彻底解决滚动穿透
男神的专栏
02-29 988
什么是滚动穿透如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。
JS弹出Div、遮罩层(滚动条不可动)
07-29
JS弹出Div+遮罩层,弹出遮罩后滚动条不可滚动。
uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透
weixin_45368519的博客
03-24 3548
近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下
遮罩层下禁止滚动
weixin_51772991的博客
05-10 263
通过动态绑定class ,来禁止遮罩层打开后页面滚动。
【CSS】对话框--禁止弹框/对话框蒙层下方内容滚动
keruisiya的博客
10-27 1505
上方案 在父盒子中加入overflow属性：只要设置scorll（或者auto）的时候，在父盒子区域滚动（滚动条为父盒子区域内） 而不是在浏览器区域滚动（滚动条为浏览器的滚动条）。 附上图 加上overflow滚动条的位置在里面，下方内容区域不可滚动 不加overflow属性，下方内容区域可滚动 注： 没有理解，此时加上overflow属性，为什么下方内容区域就没办法向下滑动了，是和浏览器自身有关系吗？ 代码： <!DOCTYPE html> <html lang="en"&
jQuery --- 解决蒙层/遮罩层下面内容可以滚动问题
删库跑路
08-03 2261
出现蒙层/遮罩层的时候 加入这段代码页面就不能滚动了 $('body).css('overflow-y','hidden'); 蒙层/遮罩层消失需要回复页面滚动加入这段代码即可 $('body).css('overflow-y','scroll');...
Html5 滚动穿透的方法
11-21
问题背景： 网站需要在移动端完成适配,针对移动端H5以及web端采用的都是bluma这种flex布局解决方案 在H5中使用的列表采用的是 react-virtualized 来绘制表格 为了展示表格中单行数据的具体详情，通常的解决方案是采用新页面或者是弹窗来完成。 这里采用的是弹窗的方案，点击单行数据后的数据详情用的是 bluma 的 modal-card。 具体细节和实例可以参考：https://bulma.io/documentation/components/modal/ 问题详情： 在点击单行数据后，弹窗显示详情数据，整个 modal-card 设置成 position:fixed;
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同，需要特定的...
老生常谈遮罩层 滚动条的问题
09-02
总结起来，解决遮罩层与滚动条问题的关键在于： 1. 使用JavaScript监听窗口的滚动和大小改变事件，当这些事件发生时，更新遮罩层的尺寸。 2. CSS中设置遮罩层为固定定位，全屏大小，并具有较高的z-index值。 3. ...
vue 遮罩层阻止默认滚动事件操作
11-20
在构建移动端页面时，我们经常会遇到这样一个问题：当弹出遮罩层或...对于移动端和 PC 端，我们可以根据具体需求选择合适的解决方案，以确保在弹出层或遮罩层出现时，页面滚动被正确地控制，从而提供更佳的用户体验。
【前端词典】滚动穿透问题的解决方案.docx
10-26
3. 框架或库支持：许多前端框架，如React和Vue，都有现成的解决方案或插件来处理滚动穿透，比如React的`react-modal`库和Vue的`vue-modal`组件。 4. CSS变量和自定义滚动条：利用CSS变量和自定义滚动条样式，可以...
移动端vue项目解决遮罩层滚动穿透问题
weixin_42552058的博客
11-28 1355
三种穿透滑动情况以及解决办法 1.引用mintui中mt-popup下拉选择框选择内容时，滑动穿透问题 （1）如果下拉选择内容过少，mt-popup内部不需要滑动： 就只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件 <mt-popup v-model="popupVisible" position="bo...
css蒙层穿透,CSS题目系列（4） - 文字穿透遮罩层
weixin_36338765的博客
08-04 1517
描述在我刚开始学习前端开发不久的时候，曾在一个网站看到过一个效果，当时费尽脑筋，又是Canvas、又是SVG，还是无法实现(其实SVG好像是有办法可以实现的，但当时觉得麻烦就没弄)。效果就是这样的：image这个效果的难点在于，如何让文字穿透过遮罩层，但是这样好像很难。直到最近，我看到了张鑫旭大神的一篇文章，文中讲述了如何给文字添加背景颜色(也可以是背景图片)，顿时醍醐灌顶，想到了这样一个解决方案...
CSS自定义弹窗如何禁用遮罩层滚动条？用CSS禁用滚动穿透。
qq_33820780的博客
12-28 1107
/ 页面最外层元素.wrap {
css自定义滚动条上下箭头图标
11-08
CSS自定义滚动条上下箭头图标可以通过CSS伪元素来实现。具体实现方法如下： ```css /* 上箭头 */ ::-webkit-scrollbar-button:start:decrement { background-color: #fff; background-image: url(上箭头图片地址); background-repeat: no-repeat; } /* 下箭头 */ ::-webkit-scrollbar-button:end:increment { background-color: #fff; background-image: url(下箭头图片地址); background-repeat: no-repeat; } ``` 其中，`::-webkit-scrollbar-button:start:decrement`表示滚动条的上箭头，`::-webkit-scrollbar-button:end:increment`表示滚动条的下箭头。你可以将`background-image`属性设置为你想要的箭头图片的地址，然后通过`background-repeat`属性来控制图片是否重复。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值