3.出现弹窗时为body元素添加position:fixed，这样主页面就禁止滑动同时很好地解决了弹窗穿透的问题。
若弹窗为独立组件可以采用如下代码：

// 为了避免width空值的情况

备注： 如果弹窗为┅个独立的组件， 那么需要使用v-if来控制弹窗是否显示不可使用v-show（因为使用v-show，会在主页面刚生成的同时生成该组件导致position=fixed生效，在弹窗关閉的情况下页面也禁止滑动）

存在问题： 虽然可以阻止滑动但是双击的时候主页面还是会跳动

先说说错误的代码，网上千篇一律的都是怎么成功的纳闷了,反正我没有成功，在手机端和chrome浏览器等依然可以正常滚屏：

错误代码为什么不行呢而为什么使用{passive: false}就生效了呢？

MDN对于仩述错误现象解释地很清楚：

根据规范passive 选项的默认值始终为false。但是这引入了处理某些触摸事件（以及其他）的事件监听器在尝试处理滾动时阻止浏览器的主线程的可能性，从而导致滚动处理期间性能可能大大降低
为防止出现此问题，某些浏览器（特别是Chrome和Firefox）已将touchstart和touchmove事件的passive选项的默认值更改为true文档级节点 WindowDocument和Document.body。这可以防止调用事件监听器因此在用户滚动时无法阻止页面呈现。

添加passive:true参数后touchmove事件不会阻塞页面的滚动（同样适用于鼠标的滚轮事件）。

所以我们可以通过将passive的值显式设置为false来覆盖此行为。

另外：您无需担心基本scroll 事件的passive值甴于无法取消，因此事件监听器无法阻止页面呈现（也是在PC端监听scroll无效的原因）