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

项目场景

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

---

问题描述

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

---

原因分析

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

---

解决方案

1. van-overlay 设置 :lock-scroll=“false”

<van-overlay :show=“showDialog” @click=“showDialog = false” :lock-scroll=“false”>

2. 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; /* 允许垂直滚动 */
}

3. overflow 与滚动条

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

4. JavaScript 事件处理

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

document.querySelector('.scrollable').addEventListener('touchmove', function(e) {
  e.stopPropagation(); // 防止事件冒泡，但不会阻止滚动
}, { passive: true }); // passive: true 允许滚动

5. CSS pointer-events
   • pointer-events 属性：如果设置了 pointer-events: none;，将会禁用元素上的所有鼠标事件，包括滚动事件。

.no-pointer-events {
  pointer-events: none; /* 禁用所有鼠标事件 */
}

6. 浏览器兼容性

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

解决方案示例

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.