本文主要是介绍解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
项目场景
在游戏门户网站需要根据弹出层列举出自己背包的饰品,然后进行选择置换。
问题描述
例如:在PC端的时候能物品过多的时候能正常左右滚动,而且启用Google的开发者工具进行查看的时候也是能正常滚动,但是在手机端访问的时候手指却怎么也滑不动。
原因分析
- 因为遍历,事件冒泡导致不可以手指滑动
- van-overlay 阻止了滚动时间。
解决方案
- van-overlay 设置 :lock-scroll=“false”
<van-overlay :show=“showDialog” @click=“showDialog = false” :lock-scroll=“false”>
- 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 窗口滑动透传的问题通常指的是在网页中,某些滑动事件(如触摸滑动)没有按照预期进行传递或处理,可能导致窗口内的元素无法滚动,或者滑动事件被错误地阻止。这个问题在移动端特别常见,原因可以包括以下几个方面:
-
overflow 和 position 属性
• overflow 属性:如果父容器或滚动容器的 overflow 属性设置为 hidden 或 scroll,可能会影响滑动事件的传递。如果某个容器设置了 overflow: hidden,它可能会阻止内容的滚动。
• position 属性:使用 position: fixed 或 position: absolute 的元素可能会影响事件的传递和滚动行为。 -
touch-action 属性
• touch-action:这个 CSS 属性控制触摸事件的行为。默认情况下,某些浏览器可能会对触摸事件进行处理,如滚动和缩放。如果 touch-action 设置不正确(如 none),它可能会阻止滚动行为。为了允许滚动,通常会将其设置为 pan-y(允许垂直滚动)或 auto。
.scrollable {touch-action: pan-y; /* 允许垂直滚动 */
}
-
overflow 与滚动条
• 如果弹窗的父容器或其外部容器的 overflow 属性没有正确设置,可能会导致滚动条消失或不生效。例如,如果 .goods-list 的父容器 .goods-list-wrap 设置了 overflow: hidden,这可能会阻止 .goods-list 的滚动。
-
JavaScript 事件处理
• touchstart, touchmove, touchend 事件:在移动端,JavaScript 的触摸事件处理可能会干扰默认的滚动行为。例如,如果有 touchmove 事件的监听器调用了 e.preventDefault(),这会阻止默认的滚动行为。
document.querySelector('.scrollable').addEventListener('touchmove', function(e) {e.stopPropagation(); // 防止事件冒泡,但不会阻止滚动
}, { passive: true }); // passive: true 允许滚动
- CSS pointer-events
• pointer-events 属性:如果设置了 pointer-events: none;,将会禁用元素上的所有鼠标事件,包括滚动事件。
.no-pointer-events {pointer-events: none; /* 禁用所有鼠标事件 */
}
-
浏览器兼容性
• 不同浏览器和设备可能有不同的触摸和滚动处理机制。确保在多种设备和浏览器上进行测试,并根据需要进行兼容性调整。
解决方案示例
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 让他帮我分析原因,但是结果总是不如意也没能解决才转而从网上寻找解决办法,前后花了我不少时间,有必要总结下。
针对于前端问题,我们一定要将问题描述清楚,这样才能极快的找到对应的解决方法,对于如何描述清楚,我觉得有以下几点:
- 确认使用的框架,例如VUE,React, 以及什么脚手架(ant-desgin,element-ui,vant等等)
- 缩小范围,提供更多的背景。例如是移动端的弹出框,遮罩层还是其他组件出现的问题。
- 组件的名称要具体,例如Vant遮罩层van-overlay.
这篇关于解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!