解决移动端使用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.