dialog滚动条滑动当前页面影响到底层页面的滑动,网上的解决思路大多是,添加overflow:hidden。但是无论怎么修改,都无法适配。怀疑人生。
后来换了一种思路,发现部分ios系统不适用于此方案。
于是通过全局自定义指令v-fixed,来解决这个问题。
即:使用当弹窗出现的时候将页面body的position设置为fixed并记录此刻滚动的位置,弹窗消失去除position属性
import Vue from 'vue'
Vue.directive('fixed', {
inserted() {
//遮罩出现不可以滚动
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
},
// unbind 指令与元素解绑时调用 去除遮罩恢复滚动
unbind() {
let body = document.body
body.style.position = ''
let top = body.style.top
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
body.style.top = ''
}
})