如何解决Vue移动端滚动穿透导致的页面内容错乱问题？

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

概述+今天在做Vue移动端项目的时候遇到了滚动穿透问题，在网上查资料后，选择了我觉得最好的方法，记录下来供以后开发时参考，相信对其他人也有用。+上层无需滚动+如果上层无需滚动

概述

今天在做 Vue 移动端项目的时候遇到了滚动穿透问题，在网上查资料后，选取了我觉得最好的方法，记录下来供以后开发时参考，相信对其他人也有用。

上层无需滚动

如果上层无需滚动的话，直接屏蔽上层的 touchmove 事件即可。示例如下：

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

上层需要滚动

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