关于弹窗的内部滑动穿透底层页面的滑动的问题（H5/App-plus）

最新推荐文章于 2024-01-25 09:39:37 发布
最新推荐文章于 2024-01-25 09:39:37 发布
阅读量545 收藏 1
点赞数 2
分类专栏： Vue使用心得
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44601948/article/details/108925712
版权

目录

H5移动端处理方法

先上bug图

在这里插入图片描述

解决

在弹出弹窗的时候将body的overflow 改成hidden
在取消弹窗的时候将body的overflow 改成scroll

代码

底层页面
在这里插入图片描述
弹窗组件
在这里插入图片描述

效果图

在这里插入图片描述

app-plus端处理方法

如果你是编译成app 那么document是不能用的
换个思路

底层页面（common页面）

只能控制父层的style样式
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

弹窗组件（SecondCommon页面）

在这里插入图片描述

澜漾
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5页面APP端展示（下拉刷新，上拉加载）
12-16
H5页面APP端展示（下拉刷新，上拉加载）
vue解决弹出蒙层滑动穿透问题的方法
10-17
在Vue开发中，处理弹出蒙层滑动穿透问题是一个常见的前端交互细节问题。当用户在弹出的全屏蒙层上滑动时，如果没有得到妥善处理，滑动事件会穿透蒙层，继续影响到蒙层下面的可滑动列表，导致用户体验不佳。本文通过...
解决ios弹出层滚动穿透
youngeffort的博客
07-09 3914
现象：h5页面的弹出层在ios中滚动会触发底层页面的滚动 原因：touchmove事件的默认行为未阻止 解决：阻止touchmove事件的默认行为 vue代码如下：popupVisible（type：Boolean）变量控制弹出层 watch: { // 如果 `question` 发生改变，这个函数就会运行 popupVisible(newQuestion, oldQu...
完美解决移动端H5页面的滑动穿透问题
dearbaba_11的博客
05-21 160
完美解决移动端H5页面的滑动穿透问题
弹框滑动带动底层页面滑动的解决方案
MSITC的博客
01-29 594
处理弹框滑动带动底层页面的滚动问题
HTML开发 完美解决移动端H5页面pop弹出蒙版后底层滑动问题
开发仔XG
03-07 1581
html 弹出蒙版后禁止底层滑动 在对应的最外层（蒙版父视图），添加css position: relative; 蒙版层使用 position: fixed; 然后点击弹出蒙版和关闭蒙版 调用下面的方法 // 处理弹出/关闭pop的时候，使背景图不滚动 fixedBody: function () { var _body = document.body if (_body.style...
vue模拟聊天页面列表：滚动到底部，滚动到顶部触发加载更多
最新发布
sqf251877543的博客
01-25 1303
/list更新后，等待页面渲染完毕再去拿scrollHeight,否则拿到的是之前的。//auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动。//auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动。//auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动。//顶部在原先基础上往下滚动50px，露出新加载数据的一点。//模拟耗时任务从接口获取数据。//数据全部加载完毕。
H5 jQuery仿某社交APP滑动切换.zip
07-11
引入js文件 [removed][removed] [removed][removed]
jQuery实现弹窗下底部页面禁止滑动效果
10-18
然而，如果在打开弹窗的同时允许用户滚动背景页面，可能会分散用户注意力，导致不好的用户体验。因此，阻止背景页面在弹窗打开时滚动是一个常见的需求。 使用jQuery来实现这种效果，首先需要理解的是页面滚动的基本...
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
10-14
在开发Vue应用时，我们可能会遇到使用第三方滚动库如Vue-scroller时，遇到的一个常见问题：在页面中包含`<input>`输入框时，用户在输入框区域内无法触发滚动操作。这个问题主要是由于Vue-scroller组件内部的源码逻辑...
移动端H5弹窗 完完整整，拿来即用
01-31
这是我自己在项目中使用的代码，我把它抛离出来，送给需要的人，完完整整，拿来即用，包括确认弹窗、取消/确认弹窗，点击确认后触发ajax请求后台
解决移动端滚动穿透
11-09
解决移动端面滚动穿透问题，以及不影响内容滚动，适合做弹窗
H5随机短视频滑动版带打赏源码，可封装APP软件或嵌入式观看
10-11
H5随机短视频滑动版带打赏源码，可封装APP软件或嵌入式观看，网站引流必备源码！ 数据来源抖音和快手官方短视频链接，无任何违规内容！可自行添加广告等等！ 手机端完美支持滑动屏幕观看（向上或向右）滑动，将会...
解决只能滑动弹框内容不能滑动弹框底层内容
weixin_33920401的博客
04-11 334
解决方法就是弹框事件触发的时候，给body加这些属性： .index_body { overflow-y: hidden;/*为了兼容普通PC的浏览器*/ height: 100%; position: fixed; }不能用下面这个方法，这样都不能滑动了 /*去掉手机滑动默认行为*/ $('body').on('touchmove', function ...
解决移动端滚动穿透的6种方法，经常发生在弹出遮罩层内容滚动，下面页面也滚动的情况
cc1511599982的博客
06-02 5312
一、body无滚动 + 弹层无滚动[css-超出隐藏] 适用场景需满足以下条件： 1、body最好是一屏、无滚动 2、虽然body内容超出一屏需滚动，但触发弹层出现的按钮在第一屏中 3、弹层不用滚动效果 解决方案： 弹层出现时，用css给body设置固定定位和超出隐藏。 关键代码： btn.onclick = function () { // 弹层出现 layer.style.display = 'block'; document.body.style.overfl
web端下和uniapp下滑动穿透的解决方案，弹窗滑动导致底部滑动问题解决
weixin_44120503的博客
07-28 1555
web端和uniapp滑动穿透解决方案
移动端页面弹窗后，底部页面还能继续滑动解决方案
老夫风清扬的博客
05-20 3756
背景：页面本身具备滚动条，弹窗后，还是能继续滑动底部的页面，体验不好。 解决方案一：弹窗后将底部页面设置overflow:hide;当弹窗结束后又重新设置回overflow:auto/scroll。 这个方案大家都比较熟悉，虽然能解决问题，但是又存在的另外一个问题。那就是但你页面浏览到底部的时候，你页面设置overflow:hidden;页面瞬间回到了顶部。这样的体验感觉也是够奇怪的了~所以我们还...
如何设置弹框中的内容可以滑动，外面的页面不可以滑动
MM__GCM666的博客
07-13 1543
如何设置弹框中的内容可以滑动，外面的页面不可以滑动 场景 最近做移动端开发时 有一个需求需要设置弹框里的内容可滑动，弹框外的页面不可滑动，弹框隐藏时页面滑动正常 原理 overflow ：“hidden” overflow: “auto” 注意事项 刚开始使用的时候 直接把overflow ："hidden"加到了body上 没有起作用 后来冷静想了一下 我应该把禁止滚动加到可滑动的元素上 而不是直接加在body 上 //页面禁止滑动 //当弹框出现和隐藏时 调用这个方法
弹窗里面滚动穿透问题完美解决
FE-阿阳的博客
05-29 2234
弹窗里面滚动穿透问题完美解决 问题描述 在业务场景中经常会有页面有个弹窗操作，滑动弹窗滚动穿透到页面，页面在滚动，有些强迫症（难说话）的产品是不能接受的，就需要咱们研发想办法解决了。 解决方案 其实好多人都遇到这种问题，所以解决方案也比较多，但是那种方案是比较完美的呢。 方案一： 很多人第一思路是禁止滚动穿透去解决，在弹窗上面阻止滑动事件冒泡，这样的能解决弹窗文案少的场景，如果弹窗内本身需要滑动，比如：有 textarea 标签的输入需求，就会出问题了。 方案二： 下面代码完美解决： // css 设置 .
uni H5 使用uni-simple-router路由跳转页面不能滑动问题
05-27
uni-simple-router是一款基于Vue.js和uni-app框架的轻量级路由库，用于实现H5页面的路由跳转。与vue-router不同的是，uni-simple-router默认开启了路由切换时的滑动动画效果，这可能会导致一些页面无法滑动。 解决方法如下： 1. 关闭路由滑动动画 可以在路由配置文件中，通过设置transition参数为false，来关闭路由切换时的滑动动画。例如： ```javascript const router = new Router({ routes: [ { path: '/home', component: Home, transition: false }, { path: '/about', component: About, transition: false } ] }) ``` 这样就可以关闭路由切换时的滑动动画，解决页面不能滑动的问题。 2. 配置全局样式 在H5中，页面高度有时会被固定为屏幕高度，导致内容溢出无法滚动。可以在全局样式中添加以下代码，来解决这个问题： ```css html, body { width: 100%; height: 100%; overflow: auto; } ``` 这样就可以让页面的高度自适应屏幕高度，并且内容可以进行滚动。 需要注意的是，uni-simple-router的滑动动画效果可能会对页面性能产生一定影响，如果应用对性能要求比较高，可以选择关闭滑动动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值