🌟vue 移动端弹窗后禁止页面滚动 touchmove.prevent🌟
发布时间：2025-03-21 13:11:46来源：
在开发移动端 Vue 项目时，经常会遇到这样一个场景：当用户打开一个弹窗（如提示框、选择器等）时，背景页面的滚动会干扰用户的操作体验。这时，就需要通过 `touchmove.prevent` 来阻止页面滚动，提升交互友好度。
首先，在弹窗展示时，我们需要监听 `touchmove` 事件，并添加 `preventDefault()` 方法。例如：
```javascript
document.addEventListener('touchmove', (e) => {
e.preventDefault(); // 禁止默认滚动行为
}, { passive: false });
```
但需注意，使用 `passive: false` 是为了确保 `preventDefault()` 能生效，否则浏览器可能会忽略此设置。此外，当关闭弹窗时，记得移除该事件监听，避免影响其他功能：
```javascript
document.removeEventListener('touchmove', handleTouchMove);
```
这样做不仅优化了用户体验，还让页面逻辑更加清晰流畅。💡 让每一次交互都顺滑自然，是每个开发者追求的目标！✨
免责声明：本答案或内容为用户上传，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 如遇侵权请及时联系本站删除。
