[vue]使用自定义指令解决部分ios系统无法直接使用overflow：hidden解决弹出弹窗遮罩时滚动穿透的问题

dialog滚动条滑动当前页面影响到底层页面的滑动&＃xff0c;网上的解决思路大多是&＃xff0c;添加overflow&＃xff1a;hidden。但是无论怎么修改&＃xff0c;都无法适配。怀疑人生。

后来换了一种思路&＃xff0c;发现部分ios系统不适用于此方案。

于是通过全局自定义指令v-fixed&＃xff0c;来解决这个问题。

即&＃xff1a;使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性

import Vue from &＃39;vue&＃39;Vue.directive(&＃39;fixed&＃39;, {inserted() {//遮罩出现不可以滚动let scrollTop &＃61; document.body.scrollTop || document.documentElement.scrollTopdocument.body.style.cssText &＃43;&＃61; &＃39;position:fixed;width:100%;top:-&＃39; &＃43; scrollTop &＃43; &＃39;px;&＃39;},// unbind 指令与元素解绑时调用 去除遮罩恢复滚动unbind() {let body &＃61; document.bodybody.style.position &＃61; &＃39;&＃39;let top &＃61; body.style.topdocument.body.scrollTop &＃61; document.documentElement.scrollTop &＃61; -parseInt(top)body.style.top &＃61; &＃39;&＃39;}})