H5出现蒙版后，禁止屏幕滚动

最新推荐文章于 2023-03-24 18:19:31 发布
原创 最新推荐文章于 2023-03-24 18:19:31 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在H5页面显示蒙版时禁用屏幕滚动功能，通过修改HTML及body元素的overflow属性来改善用户体验。
H5出现蒙版后，禁止屏幕滚动；
在移动端编写项目的时候，我们会自己做一些蒙版类的提示框。当提示框出现的时候我们要禁止屏幕滚动，否则用户的体验感很差。
如下图
H5出现蒙版后，禁止屏幕滚动
我们需要改变 html和body的overflow属性
mengban 出现function(){
$("html").add("body").css({"overflow":"hidden"})
}
别忘了关闭蒙版的时候要变回 auto

jameszhufu
关注
H5端禁止蒙层底部页面跟随手势滚动
JUSTIN的博客
06-25 2712
(一) 前言 说来真是搞笑，之前很多交互都是依赖UI库的modal实现，之前也遇到过类似天猫商品列表页面那种下拉筛选，也解决过相关手势问题，但是，后面一个同事再次问起这个问题，回头去总结下，发现之前通过选取dom并为背景和内容分别处理touchmove事件，但是这仅仅是对于h5的一个解决方案，所以总结常见在pc/h5上面分别的处理方案。 (二) PC处理方案 打开蒙层时，给body添加样式： ov...
html5蒙层引导页,Canvas Xfermode 绘制引导页蒙层
weixin_29216957的博客
06-04 652
首先看下我们需要实现的效果：Paste_Image.png我们需要制造半透明的灰色蒙层，以及全透明的圆圈来着重显示功能点。当然在图层上的view可以使用各种切图实现不同的效果。最开始我是通过自定义全屏的DIalog完成这个效果，但是测试发现，自定义的View一直无法绘制全屏，尽管我尝试通过测量手机宽高来绘制全屏的background bitmap，依然无功而返…(应该是写代码的姿势不对)于是我换成...
阻止蒙版后页面滑动
weixin_30492047的博客
04-01 237
$(".black-model").on('touchstart',function(e){ e.preventDefault(); }) 阻止事件冒泡 转载于:https://www.cnblogs.com/yk-ontheway/p/6654792.html
javascript实现蒙版与禁止页面滚动
11-29
本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码，供大家参考，具体内容如下 项目需求：页面很长，要求加个蒙版，点击特定位置蒙版消失可以滑动页面，否则蒙版存在页面不可以滑动；要同时兼容移动端和pc端。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"> <title>蒙版与禁止滚动</title> <style>
HTML开发 完美解决移动端H5页面pop弹出蒙版后底层滑动问题
开发仔XG
03-07 1695
html 弹出蒙版后禁止底层滑动 在对应的最外层（蒙版父视图），添加css position: relative; 蒙版层使用 position: fixed; 然后点击弹出蒙版和关闭蒙版 调用下面的方法 // 处理弹出/关闭pop的时候，使背景图不滚动 fixedBody: function () { var _body = document.body if (_body.style...
阻止弹窗蒙层底部页面滚动
李小暖的前端路
07-12 1419
背景：最近在做一个H5签到领红包活动，页面各种弹层显示，产品要求弹层半透明背景下主页面禁止滑动，网上找各种方法，最终确定实现该需求的以下几种方案。 方案一： 打开蒙层时，给 body 添加样式：overflow:hidden;  height: 100%;   关闭蒙层时，移除样式。 缺点：兼容性不好，适用于 pc。部分安卓机型以及 safari 中，无法无法阻止底部页面滚动。 方案二: ...
H5页面蒙版层
wfly blog
04-29 1247
代码已上传至github github代码地址：https://github.com/Miofly/mio.git HTML <div v-show="modalStatus" class="mio-modal-mask"></div> CSS .mio-modal-mask { position: fixed; top: 0; ...
弹框后禁止遮罩层后面页面滚动（兼容ios和android）.zip
08-20
"弹框后禁止遮罩层后面页面滚动（兼容ios和android）"这个主题涉及到的是一个常见的问题，即当弹出一个对话框或者遮罩层时，如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同，需要特定的...
jquery实现图片无缝滚动 蒙版遮蔽效果
11-27
标题中的“jquery实现图片无缝滚动 蒙版遮蔽效果”指的是使用jQuery库来创建一个具有无缝滚动功能的图片展示区域，并在特定情况下通过蒙版（mask）来达到视觉上的遮蔽效果。以下是对这个主题的详细解释： 1. **无缝...
h5中弹框出现后禁止页面滚动
小小•愿望的博客
10-24 3558
在写带有遮罩层的弹窗时，弹窗出现时，弹框后面的页面依然会保持滚动状态，其实这种情况并么什么影响，但是有很多时候想禁止滚动。无论在移动端还是PC端都会遇到这种情况。在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动。
uniapp H5遮罩层，弹窗，蒙层滚动穿透/滑动穿透
weixin_45368519的博客
03-24 4794
近期项目用到了uniapp + uview 就出现了很多奇怪的问题，滚动穿透问题更是奇怪且多发。不论是弹窗，蒙层，遮罩，或者普通的元素置顶都会出现，也是解决了很久，特地记录一下
【CSS-04】移动端蒙层底部页面禁止滑动
热门推荐
always_littlesun的专栏
05-03 2万+
本篇主要讲如何在页面上加蒙层。蒙层居中，且底部页面不能再滑动。 蒙层 效果： 关键字：z-index, rgba 实现： body分为两个大的div区域，一个是底部展示的div(div-back),一个是弹出的蒙层div(div-pop)。在弹出的蒙层区域，中间部分是container区域，里面有头部的背景图片和content内容，其中包括[知道了]尾部按钮。 对于div-pop，背景色设置为5
蒙层禁止页面滚动的方案
WindRunnerMax
01-10 3391
蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题，文中介绍了一些常用的解决方案。 实现 首先需要实现一个蒙层下滚动的效果示例，当我们点击弹窗按钮显示蒙层之后，再滚动鼠标的话能够看到蒙层下的页面依旧是能够滚动的。如果在蒙层的内部进行滚动，当蒙层内滚动条滚动到
vue项目中出现蒙版，不让页面滚动
violetta521的博客
11-13 1311
data中设置一个数据 windowheight:{ //高度等于屏幕高度 height:document.documentElement.clientHeight+'px', overflow:'hidden', } 在最外层的盒子进行判断，蒙版markshow出现为ture，就执行上面代码， 当关闭蒙版，设置为false，不执行上述代码，页面正常滚动 <div class="detail" :style="m..
vue开发H5，遮罩层下方内容禁止滑动（滚动）
aGreetSmile的博客
10-17 1461
解决办法，直接在遮罩层所在的div加上“ @touchmove.prevent ” 即可 <div @touchmove.prevent>这是遮罩层的div</div>
添加蒙版及原页面不滚动
ltf_1225的博客
06-04 1070
一，添加蒙版        蒙版class:{position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: auto;margin: 0;z-index: 2001;background: #000;opacity: 0.5;   } 如果有弹窗，弹窗的z-index要比蒙版的高；二，去除外部滚动条    去除滚动条的话只需要点击触发蒙版的...
h5页面禁止遮罩层滚动
weixin_45503820的博客
09-17 457
<div v-show="showCopyBlock" @touchmove.prevent></div>
uni-app 禁止页面滚动
最新发布
09-06
在uni-app中禁止页面滚动有以下几种实现方法： 1. **APP平台禁止页面滑动**：若要禁止APP平台页面上下滚动，可在该页面的`style`中进行配置，此配置仅对该页有效。示例代码如下： ```json { "path": "pages/login/login", "style": { "app-plus": { "bounce": "none" } } } ``` 此配置会禁止APP平台上该页面的滚动效果[^1]。 2. **禁止遮罩层下的页面滚动**：若需要禁止蒙版下的页面滚动，可在遮罩层的`view`元素上添加`@touchmove.stop.prevent`事件处理。示例代码如下： ```vue <view class="mask" @touchmove.stop.prevent="moveHandle"></view> ``` 这里的`view`即为遮罩层，通过这种方式可以阻止触摸移动事件传递到下层页面，从而禁止下层页面滚动[^2]。 3. **HBuilder X和微信小程序禁止页面滚动**：可在模板中使用`catchtouchmove`属性来禁止页面滚动。示例代码如下： ```vue <template> <view> <view class="zhemu" catchtouchmove="true"></view> <view class="gun">滚动区域</view> </view> </template> <script> export default { data() { return {} }, methods: {} } </script> <style scoped> .zhemu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 98; background-color: rgba(0, 0, 0, 0.4); } .gun { height: 2000rpx; background-color: white; } </style> ``` 在这个例子中，`catchtouchmove="true"`阻止了触摸移动事件，使得页面无法滚动。该方法在HBuilder X和微信小程序上有效，在手机真机测试时页面也不会滚动[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值