uniapp H5的弹窗滚动穿透解决

 

目录

方案一 事件修饰符 + overscroll-behavior

修饰符

overscroll-behavior

属性

看个案例

兼容

方案二 overflow:hiden 


    有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上一样,我们称之为滚动穿透。

方案一 事件修饰符 + overscroll-behavior

修饰符

  • .stop: 各平台均支持, 使用时会阻止事件冒泡,在非 H5 端同时也会阻止事件的默认行为

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止对元素自身的点击。

若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle"moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。

// 在父级元素添加重写滚动事件   @touchmove.stop.prevent="() => { }"
<view class="list" @touchmove.stop.prevent="() => { }"><uni-data-picker placeholder="请选择项目" popup-title="请选择所属项目" :localdata="items" v-model="classes" @change="onchange"></uni-data-picker>
</view>

overscroll-behavior

overscroll-behavior,MDN介绍看这里

当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

   默认情况下,当触及页面顶部或者底部时(或者是其他可滚动区域),移动端浏览器倾向于提供一种“触底”效果,甚至进行页面刷新。你可能也发现了,当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

属性

先看一张MDN官方的属性值及其描述的图。

image.png

auto: 默认值,但是要注意,这里的auto是包含移动端的触底效果的

contain:本文的主要讲解属性

none:禁止滚动效果(包含触底)

看个案例

官方示例是添加属性之后,为了方便掩饰,我使用了默认值进行录制。

而这也是我们经常遇到的情况,在有弹窗时,滚动弹窗会导致页面跟随滚动。

官方实例看这里

跟随官方示例,如果希望做到滚动弹窗而不影响页面时,我们只需要在摊床上添加属性oversroll-behavior:contain即可以实现滚动弹窗而不影响页面的效果了。

这段代码需要加在最外层的父级元素上面:

	/deep/ .container {// 在真正的滚动区域设置 阻断滚动穿透overscroll-behavior-y: contain !important;}

兼容

照例,看一眼兼容情况。

image.png

不能说是完全没法用,只能说是有点惨烈。

不过主流的Chrome、Firefox、edge的兼容都是还可以的。

所以如果有需要应用的话,还是值得考虑的。

部分不兼容的页面最多是没有这个效果,但是主流浏览器的用户都可以正常访问使用。

方案二 overflow:hiden 

优点:编码简单

缺点:由于设置了overflow:hiden,底部元素会默认滚动到顶部,意味着之前滚动的距离会被清空

 1.添加在uitil.js文件中

// 阻止页面滚动
export function stop(){var box=function(e){passive: false ;};document.body.style.overflow='hidden';document.addEventListener("touchmove",box,false);
}
// 允许页面滚动
export function move(){var box=function(e){passive: false };document.body.style.overflow=''; // 出现滚动条document.removeEventListener("touchmove",box,false);
}

2.绑定在原型上,在main.js

import {stop,move} from '@/utils/utils.js'
Vue.prototype.stop = stop
Vue.prototype.move = move

3.在打开弹窗和关闭弹窗时使用this调用(打开使用this.stop(),关闭使用this.move()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/1709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

冯唐成事心法笔记

文章目录 卷首语 管理是一生的日常&#xff0c;成事是一生的修行PART 1 知己 用好自己的天赋如何管理自我用好你的天赋成大事无捷径如何平衡工作和生活做一个真猛人做自己熟悉的行业掌控情绪如何对待妒忌和贪婪如何战胜自己&#xff0c;战胜逆境真正的高手都有破局思维有时候…

本地环境测试

1. 在 Anaconda Navigator 中&#xff0c;打开 Jupyter Notebook &#xff0c;在网页中&#xff0c;点击进入本地环境搭建中创 建的工作目录&#xff0c;点击右上角的 New- 》 Folder &#xff0c;将新出现的 Untitled Folder 选中&#xff0c;并使用左上角 的 Rename 按钮重…

白蚁自动化监测系统解放方案

一、系统介绍 白蚁自动化监测系统是基于物联网的各项白蚁监测点数据的采集形成智能控制系统。提供白蚁实时预警及解决方案&#xff0c;真正实现区域内白蚁种群消灭。白蚁入侵&#xff0c;系统第一时间自动报警&#xff0c;显示入侵位置&#xff0c;实现抓获白蚁于现场的关键环…

【Linux】认识文件(三):缓冲区

【Linux】认识文件&#xff08;三&#xff09;&#xff1a;缓冲区 一.啥是缓冲区&#xff1f;二.缓冲区现象三.缓冲区的刷新方法四.缓冲区在哪&#xff1f;五.为什么要有缓冲区 一.啥是缓冲区&#xff1f; 缓冲区&#xff0c;官方说法就是&#xff1a;指的是一块用于临时存储数…

linux配置mail发送邮件

无邮件正文 mail -s “主题” 收件地址 有邮件正文 mail -s “主题” 收件地址< 文件(邮件正文.txt) echo “邮件正文” | mail -s 邮件主题 收件地址 cat 邮件正文.txt | mail -s 邮件主题 收件地址 带附件 mail -s “主题” 收件地址 -a 附件 < 文件(邮件正文.t…

LeetCode 409—— 最长回文串

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 要想组成回文串&#xff0c;那么只有最中间的字符可以是奇数个&#xff0c;其余字符都必须是偶数个。 所以&#xff0c;我们先遍历一遍字符串&#xff0c;统计出每个字符出现的次数。 然后如果某个字符出现了偶…

MySQL InnoDB事务处理探秘:原理、特性与实战攻略

在现代数据库领域&#xff0c;事务处理是确保数据一致性和完整性的重要手段。MySQL InnoDB存储引擎以其强大的事务处理能力著称&#xff0c;它遵循ACID原则&#xff0c;为用户提供了可靠、灵活的事务管理环境。本文将深入探讨InnoDB事务处理的原理、特性&#xff0c;辅以通俗易…

FlinkSQL Tips

FlinkSQL使用小技巧总结 1. 分组聚合 create view t1 as select 1 as id, lisi1 as name ,12 as age UNION ALL select 1 as id, lisi2 as name,11 as age UNION ALL select 1 as id, lisi3 as name,15 as age UNION ALL select 1 as id, lisi4 as name,13 as age UNION ALL …

vi, vim,data,wc,系统常用命令-读书笔记(十)

vi 文本编辑器 基本上 vi 共分为三种模式&#xff0c;分别是“一般指令模式”、“编辑模式”与“命令行命令模式”。这三种模式的作用分别是&#xff1a; 一般指令模式&#xff08;command mode&#xff09;以 vi 打开一个文件就直接进入一般指令模式了&#xff08;这是默认的…

CentOS 安装 PHP 7

1. 安装 epel-release 1. 什么是epel 如果既想获得 RHEL 的高质量、高性能、高可靠性&#xff0c;又需要方便易用(关键是免费)的软件包更新功能&#xff0c;那么 Fedora Project 推出的 EPEL(Extra Packages for Enterprise Linux)正好适合你。 EPEL 是由 Fedora 社区打造&a…

yarn的安装与配置(Windows/macOS)

Yarn的安装与配置&#xff08;windows与macOS&#xff09; &#x1fa9f; Windows系统下安装与配置Yarn 步骤一&#xff1a;安装Node.js 访问 Node.js官方网站 下载适合您的Windows系统的最新稳定版安装包。进行默认安装&#xff0c;并确保在安装过程中勾选“Add to PATH”选…

【MySql】 深入理解SQL中的日期处理:NVL和TIMESTAMPDIFF函数的应用

还有多少个十年 能勇敢做热血青年 还有多少个十年 能坚持当初的信念 还有多少个十年 能不忘怀回忆点点 &#x1f3b5; 《还有多少个十年》 在处理数据库时&#xff0c;日期和时间的操作是日常任务中最常见且关键的部分之一。无论是过滤数据、生成报告还是…

Compose 简单组件

文章目录 Compose 简单组件TextText属性使用AnnotatedStringSpanStyleParagraphStyle SelectionContainer 和 DisableSelectionClickableText TextFieldTextField属性使用OutlinedTextFieldBasicTextFieldKeyboardOptions 键盘属性KeyboardActions IME动作 ButtonButton属性使用…

Android隐藏标题栏、移除标题栏

移除&#xff08;隐藏&#xff09;Android标题栏可使用如下代码&#xff1a; public class MainActivity extends AppCompatActivity {protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);//隐藏标题栏&#xff0c;需要置于setContentV…

玩转压力管理,轻松高效编程

程序员缓解工作压力的小窍门 在当今快速发展的科技时代&#xff0c;程序员作为数字世界的建筑师&#xff0c;面临着高强度、高压力的工作环境。为保持工作效率和创新能力&#xff0c;同时也确保身心健康和个人热情的持久续航&#xff0c;采取科学合理的减压策略至关重要。 方…

一二三应用开发平台使用手册——系统管理-用户组-使用说明

概述 在RBAC模型中&#xff0c;资源、角色、用户三个关键元素&#xff0c;构成权限体系。在平台设计和实现的时候&#xff0c;以下几个核心问题思考如下&#xff1a; 角色&#xff0c;单层平铺还是树形结构&#xff1f; 在小型应用中&#xff0c;角色数量有限的情况下&#x…

高级数据结构—树状数组

引入问题&#xff1a; 给出一个长度为n的数组&#xff0c;完成以下两种操作&#xff1a; 1. 将第i个数加上k 2. 输出区间[i,j]内每个数的和 朴素算法&#xff1a; 单点修改&#xff1a;O( 1 ) 区间查询&#xff1a;O( n ) 使用树状数组&#xff1a; 单点修改&#xff1a…

17-软件脉冲宽度调制(SW_PWM)

ESP32-S3的软件脉冲宽度调制&#xff08;SW_PWM&#xff09; 引言 ESP32-S3 LED 控制器LEDC 主要用于控制 LED&#xff0c;也可产生PWM信号用于其他设备的控制。该控制器有 8 路通道&#xff0c;可以产生独立的波形&#xff0c;驱动 RGB LED 等设备。LED PWM 控制器可在无需C…

二叉树相关

二叉树相关 力扣104 二叉树最大深度 普通递归遍历力扣 104 递归遍历2二叉树求前序遍历结果二叉树求 每个节点所在层数与每个节点的左右子树上的节点总数力扣 543 二叉树的直径 力扣104 二叉树最大深度 普通递归遍历 int depth 0;int maxDepth 0;public int maxDepth(TreeNod…