解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题

news2024/11/13 8:56:20

项目场景

在游戏门户网站需要根据弹出层列举出自己背包的饰品,然后进行选择置换。


问题描述

例如:在PC端的时候能物品过多的时候能正常左右滚动,而且启用Google的开发者工具进行查看的时候也是能正常滚动,但是在手机端访问的时候手指却怎么也滑不动。


原因分析

  1. 因为遍历,事件冒泡导致不可以手指滑动
  2. van-overlay 阻止了滚动时间。

解决方案

  1. van-overlay 设置 :lock-scroll=“false”
<van-overlay :show=“showDialog” @click=“showDialog = false :lock-scroll=false>
  1. VUE钩子函数中解除默认的冒泡触摸事件
mounted(){
  let list = document.querySelector('.myClassStyle')
  list.addEventListener('touchmove', e => e.stopPropagation(), false)
},

myClassStyle 就是我们需要设置的作用的类选择器。

总结分享(拓展)

1. H5 Nexus 4 设备

我们在进行H5调试的时候,尽量使用Nexus 4模式,如下图所示:
在这里插入图片描述
因为之前一直习惯都是Responsive 和 默认显示的那几种方式进行调试,也并没有发现问题,但是在这次的调试中发现这种浏览器样式显示正确的,但是手机端访问的时候还是会有些区别导致样式显示有问题。

至于什么是Nexus 4 这里就直接贴出百度百科的解释:
在这里插入图片描述

默认选项列表也并没有Nexus 4这个选项,我们需要自己手动添加:
在这里插入图片描述在这里插入图片描述

2. H5 窗口滑动透传

H5 窗口滑动透传的问题通常指的是在网页中,某些滑动事件(如触摸滑动)没有按照预期进行传递或处理,可能导致窗口内的元素无法滚动,或者滑动事件被错误地阻止。这个问题在移动端特别常见,原因可以包括以下几个方面:

  1. overflow 和 position 属性

    • overflow 属性:如果父容器或滚动容器的 overflow 属性设置为 hidden 或 scroll,可能会影响滑动事件的传递。如果某个容器设置了 overflow: hidden,它可能会阻止内容的滚动。
    • position 属性:使用 position: fixed 或 position: absolute 的元素可能会影响事件的传递和滚动行为。

  2. touch-action 属性

    • touch-action:这个 CSS 属性控制触摸事件的行为。默认情况下,某些浏览器可能会对触摸事件进行处理,如滚动和缩放。如果 touch-action 设置不正确(如 none),它可能会阻止滚动行为。为了允许滚动,通常会将其设置为 pan-y(允许垂直滚动)或 auto。

.scrollable {
  touch-action: pan-y; /* 允许垂直滚动 */
}
  1. overflow 与滚动条

    • 如果弹窗的父容器或其外部容器的 overflow 属性没有正确设置,可能会导致滚动条消失或不生效。例如,如果 .goods-list 的父容器 .goods-list-wrap 设置了 overflow: hidden,这可能会阻止 .goods-list 的滚动。

  2. JavaScript 事件处理

    • touchstart, touchmove, touchend 事件:在移动端,JavaScript 的触摸事件处理可能会干扰默认的滚动行为。例如,如果有 touchmove 事件的监听器调用了 e.preventDefault(),这会阻止默认的滚动行为。

document.querySelector('.scrollable').addEventListener('touchmove', function(e) {
  e.stopPropagation(); // 防止事件冒泡,但不会阻止滚动
}, { passive: true }); // passive: true 允许滚动
  1. CSS pointer-events
    • pointer-events 属性:如果设置了 pointer-events: none;,将会禁用元素上的所有鼠标事件,包括滚动事件。
.no-pointer-events {
  pointer-events: none; /* 禁用所有鼠标事件 */
}
  1. 浏览器兼容性

    • 不同浏览器和设备可能有不同的触摸和滚动处理机制。确保在多种设备和浏览器上进行测试,并根据需要进行兼容性调整。

解决方案示例

1. 确保容器能够滚动

	.goods-list-wrap {
  height: 400px; /* 设置固定高度 */
  overflow: hidden; /* 防止整体容器滚动 */
}

.goods-list {
  height: 100%; /* 填充父容器高度 */
  overflow-y: auto; /* 允许垂直滚动 */
  touch-action: pan-y; /* 允许垂直滚动 */
}

2. 确保 JavaScript 不干扰滚动

document.querySelector('.goods-list').addEventListener('touchmove', function(e) {
  // 确保没有阻止滚动的逻辑
}, { passive: true }); // passive: true 允许滚动

3. 检查 pointer-events

.goods-list {
  pointer-events: auto; /* 确保元素可以接收事件 */
}

3. 快速找到解决问题的方法

说实话解决这个问题我还是用了些时间,起初是用ChatGPT 让他帮我分析原因,但是结果总是不如意也没能解决才转而从网上寻找解决办法,前后花了我不少时间,有必要总结下。

针对于前端问题,我们一定要将问题描述清楚,这样才能极快的找到对应的解决方法,对于如何描述清楚,我觉得有以下几点:

  1. 确认使用的框架,例如VUE,React, 以及什么脚手架(ant-desgin,element-ui,vant等等)
  2. 缩小范围,提供更多的背景。例如是移动端的弹出框,遮罩层还是其他组件出现的问题。
  3. 组件的名称要具体,例如Vant遮罩层van-overlay.

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

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

相关文章

持续集成与持续部署(CI/CD)的深入探讨

在现代软件开发中&#xff0c;持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;已成为不可或缺的实践。这些方法旨在加快软件交付的速度&#xff0c;同时提高软件的质量和稳定性。通过CI/CD&#xff0c;开发团队可以频繁地将代码更改集成到主分支&…

Mate 60、Mate X5和Pocket 2新增AI修图功能:AI消除能力效果惊艳

你有没有试过拍照的时候不小心把路人拍进来&#xff0c;或者拍风景的时候有煞风景的事物闯入镜头中&#xff1f;有些美好的画面稍纵即逝、有些景点不复存在&#xff0c;看着略带瑕疵的照片&#xff0c;多少会感觉有点遗憾。 最近Mate 60、Mate X5和Pocket 2三款机型都进行了鸿…

Python sys.path与-m参数的作用

文章目录 Python sys.path与-m参数的作用sys.path作用验证结论 Python sys.path与-m参数的作用 sys.path作用 sys.path‌当试图导入一个模块时&#xff0c;Python解释器会按照sys.path中列出的路径顺序搜索对应的模块文件。 sys.path的组成包括当前目录&#xff08;即包含你…

二叉树相关练习

二叉树相关oj题&#xff1a; 对称二叉树 解题思路&#xff1a;判断一棵树是否轴对称&#xff0c;先判断左右子树结构是否相同&#xff0c;结构相同的情况下再判断对应的val是否轴对称&#xff0c;判断根节点的左右子树&#xff0c;再判断根节点的左右子树的左右子树是否轴对称…

《潮骚》爱恋的心如海潮般骚动,又如大海般广袤平静

《潮骚》爱恋的心如海潮般骚动&#xff0c;又如大海般广袤平静 三岛由纪夫&#xff08;1925-1970&#xff09;,日本当代小说家、剧作家、记者、电影制作人和电影演员&#xff0c;右翼分子。主要作品有《金阁寺》《潮骚》《丰饶之海》等。曾3次获诺贝尔文学奖提名&#xff0c;属…

类图的关联关系

类图关联关系分为单向关联关系&#xff0c;双向关联关系&#xff0c;自关联关系 单向关联关系 是一个类的属性或方法被另外一个类引用&#xff0c;二者之间用一个箭头表示 比如顾客类和地址类&#xff0c;每个顾客都有一个地址 单向关联关系在UML图中两个类之间用单向箭头表…

AI绘图提示词/咒语/词缀/关键词使用指南(Stable Diffusion Prompt 最强提示词手册)

一、为什么学习AI绘画关键词 在人工智能技术飞速发展的今天&#xff0c;AI绘画已成为艺术领域的一大热点。学习AI绘画关键词&#xff0c;不仅有助于我们掌握这一新兴技术&#xff0c;还能拓宽我们的创作思路&#xff0c;实现艺术与技术的完美融合。以下是学习AI绘画关键词的几…

基于python的人力资源管理系统/基于django的OA系统的设计与实现

摘 要 随着当今社会的发展&#xff0c;时代的进步&#xff0c;各行各业也在发生着变化&#xff0c;比如人力资源管理这一方面&#xff0c;利用网络已经逐步进入人们的生活。传统的人力资源管理&#xff0c;都是员工去公司查看部门信息、招聘信息&#xff0c;这种传统方式局限性…

C++入门基础知识44——【关于C++ 判断】

成长路上不孤单&#x1f60a;【14后&#xff0c;C爱好者&#xff0c;持续分享所学&#xff0c;如有需要欢迎收藏转发&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#xff01;&#xff01;&#xff01;&#xff01;&#xff…

【MYSQL】5 性能优化

1步骤 2查看系统性能参数 在MySQL中&#xff0c;可以使用 SHOW STATUS 语句查询一些MySQL数据库服务器的 性能参数 、 执行频率 。 SHOW STATUS语句语法如下&#xff1a; SHOW [GLOBAL|SESSION] STATUS LIKE ‘参数’; 一些常用的性能参数如下&#xff1a; • Connections&…

认识人工智能(AI,Artificial Intelligence)

人工智能(AI, Artificial Intelligence)是当今科技领域最引人注目的前沿技术之一。它的影响已渗透到各行各业,从日常生活中的虚拟助手到复杂的工业自动化系统,AI 的应用无处不在。本文将详细探讨人工智能的定义与发展历程、学习人工智能的目的、人工智能在实际生活中的应用…

嵌入式全栈开发学习笔记---Linux系统编程(多线程编程)

目录 多线程 线程&#xff08;thread&#xff09;理论 进程和线程的区别&#xff08;面试重点&#xff09; 线程的优势&#xff08;面试重点&#xff09; 多线程编程pthread 线程的创建pthread_create() 主线程等待子线程可以用pthread_join() 线程退出pthread_exit() …

Code Practice Journal | Day59-60_Graph09 最短路径(待更)

1. Dijkstra 1.1 原理与步骤 步骤&#xff1a; 选取距离源点最近且未被访问过的节点标记该节点为已访问更新未访问节点到源点的距离 1.2 代码实现 以KamaCoder47题为例 题目&#xff1a;47. 参加科学大会&#xff08;第六期模拟笔试&#xff09; (kamacoder.com) class Progra…

非开发者也能体验纯血鸿蒙了?15款机型开启鸿蒙NEXT测试招募

非开发者也能体验纯血鸿蒙了&#xff1f;这15款机型正式开启鸿蒙NEXT Beta版测试招募 8月26日&#xff0c;华为发起了新一轮的HarmonyOS NEXT Beta版的升级招募&#xff0c;据了解&#xff0c;此次升级招募面向华为Mate 60系列、华为Mate X5&#xff08;含典藏版&#xff09;、…

Linux: make指令与Makefile文件

目录 1. 场景介绍 2. make指令与Makefile文件 3. 依赖关系和依赖方法 4. 项目清理 5. 原理 5.1 识别文件是否需要编译 5.2 make原理 6. 扩展 总结 1. 场景介绍 Linux操作系统中&#xff0c;我们每编写一个C/C代码&#xff0c;都要手动使用gcc/g指令&#xff0c;对代码…

ffmpeg源码分析(六)内存管理

系列文章目录 FFmpeg源码解析系列&#xff08;一&#xff09;目录和编译 FFmpeg源码解析系列&#xff08;二&#xff09;主要结构体 ffmpeg源码解析系列&#xff08;四&#xff09;结构体之AVIOContext 、URLContext、URLProtocol ffmpeg源码解析系列&#xff08;五&#xff0…

phpstudy怎么用

启动Apache 这是你的默认网站域名。点击物理路径 进入到目录&#xff0c;将你的php文件项目拖进去。如test.php 打开浏览器

python 天气与股票的关系--第2部分,清洗数据

先看一下股票信息 合并天气信息 合并2个数据 合并之后&#xff0c;会自动删除 周六和周日 节假日 下一篇&#xff0c;尝试建立数学模型

生产环境变态开启devtools(redux篇)

前沿 默认都安装了谷歌的redux-devtools插件哦 没有亮,说明关闭了生产环境的redux devtools工具, 接下来跟着博主一起变态启用它 如果看了我上一篇的小伙伴,应该会很熟练了,如果没有看上一篇的,也没关系,博主会手摸手的教你们打开它。 正常的解决方案(适用内部开发人员…

【c++】日期类相关实践:计算日期到天数转换、日期差值

相关文章&#xff1a;日期类&#xff08;运算符重载应用&#xff09;详细版 目录 前言 实践1&#xff1a;计算日期到天数转换 题目 方法 关键代码 完整代码 实践2&#xff1a;日期差值 题目 方法 关键代码 完整代码 &#x1f497;感谢阅读&#xff01;&#x1f49…