Vue中PC端移动端滚动穿透问题如何有效解决？

本文共计2082个文字，预计阅读时间需要9分钟。

目录 + Vue + PC移动端滚动穿透问题 + 上层无滚动（简单直接 @touchmove.prevent） + 上层有滚动 + 滑动穿透终极解决方案 + 问题描述 + 问题探究 + 原理解析 + Vue + PC移动端滚动穿透问题 + 上层无滚动（简单直接 @touchmove.prevent）

目录

• vue pc移动滚动穿透问题
• 上层无滚动（很简单直接@touchmove.prevent）
• 上层有滚动
• 滑动穿透终极解决方案
• 问题描述
• 问题探究
• 原理探究

vue pc移动滚动穿透问题

上层无滚动（很简单直接@touchmove.prevent）

<div @touchmove.prevent> 我是里面的内容 </div>

上层有滚动

如果上层需要滚动的话，那么固定的时候先获取 body 的滑动距离，然后用 fixed 固定，用 top 模拟滚动距离；不固定的时候用获取 top 的值，然后让 body滚动到之前的地方即可。