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;指的是一块用于临时存储数…

LeetCode 409—— 最长回文串

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

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

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

Compose 简单组件

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

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

程序员缓解工作压力的小窍门 在当今快速发展的科技时代&#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…

CLion远程调试

一 CLion远程调试 ## 1.1 建立远程连接过程 设置——部署——“”——SFTP——新建服务器名称——输入主机、用户名、密码信息——确定 工具链建立远程主机 设置——工具链——“”——远程主机——凭据新增服务器信息 上传本地代码到服务器 ps:要保证本地文件完整&#…

测试人员一定要避免的这些不专业行为!

软件测试并非一个简单的任务&#xff0c;需要高度的专业性和责任感&#xff0c;本文将探讨一些常见的不专业行为&#xff0c;及其对软件开发过程和产品质量可能产生的负面影响。 1. 忽略细节 在测试过程中忽视细节&#xff0c;导致测试不彻底&#xff0c;漏洞未被发现。 2. …

从 Android 恢复已删除文件的 3 种简单方法

如何从 Android 恢复已删除的文件&#xff1f;毫不犹豫&#xff0c;有些人可能会认为从 Google 备份恢复 Android 文件太容易了。但是&#xff0c;如果删除的文件未同步到您的帐户或未备份怎么办&#xff1f;您错误的恢复可能会永久删除您想要的数据。因此&#xff0c;我们发布…

常见的软件架构模式

在软件开发过程中&#xff0c;软件架构模式是实现高质量、可扩展系统的关键。本文将介绍一些常见的软件架构模式&#xff0c;分析其优缺点和适用场景&#xff0c;从而帮助大家在实际项目中做出更明智的架构选择&#xff08;注意以下的架构模式相互之间并不一定互斥&#xff0c;…

23种设计模式之抽象工厂

简单工厂和工厂方法 关注 产品等级 抽象工厂 关注 产品族 对于比较稳定的产品&#xff0c;抽象工厂更有效率&#xff08;一个工厂生产很多产品族&#xff09; 抽象工厂代码例子加深理解

我与C++的爱恋:类和对象(三)

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;我与C的爱恋 先来回顾一下&#xff0c;上一节的内容并且通过上次的内容来做一道oj题。 https://leetcode.cn/problems/implement-queue-using-stacks/ class MyQueue { private:stack&l…

【LeetCode:216. 组合总和 III + 递归】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

JavaSE-15笔记【注解(+2024新)】

文章目录 1.注解概述2.几个常用的JDK内置的注解2.1 Deprecated2.2 Override2.3 SuppressWarnings2.4 FunctionalInterface 3.自定义注解3.1 注解也可以定义属性3.2 注解的使用规则补充 4.元注解4.1 Retention4.2 Target4.3 Documented4.4 Inherited4.5 Repeatable 5.通过反射获…