阻止滚动穿透:弹窗显示时,让背景页面禁止滚动
问题描述在显示弹窗时,如果底部页面可滚动,可能在弹窗显示时,滚动鼠标,会发生滚动穿透,让底部页面也一起滚动了。这种用户体验是不太好的,怎么能阻止滚动穿透呢?解决思路让弹窗显示时,阻止背景的滚动事件,弹窗关闭时,重新恢复背景的滚动示例(vue)<div>原背景页面</div>// 假设如下是一个简略的弹窗元素<div v-if="showDialog"...
·
问题描述
在显示弹窗时,如果底部页面可滚动,可能在弹窗显示时,滚动鼠标,会发生滚动穿透,让底部页面也一起滚动了。这种用户体验是不太好的,怎么能阻止滚动穿透呢?
解决思路
让弹窗显示时,阻止背景的滚动事件,弹窗关闭时,重新恢复背景的滚动
示例(vue)
<div>
原背景页面
</div>
// 假设如下是一个简略的弹窗元素
<div v-if="showDialog" class="dialog" ref="dialog">
<div class="dialog-content">
此处省略一万字......
</div>
</div>
// 可如下设置,当弹窗显示时,阻止背景页面滚动
// 在显示弹窗的方法中,修改body元素样式(可根据实际情况修改对应的背景元素)
methods: {
// 显示弹窗
showList (i) {
this.showDialog = true
// 背景禁止滚动
document.querySelector('body').style.overflow = 'hidden'
},
// 关闭弹窗
closeDialog () {
this.showDialog = false
// 背景恢复滚动
document.querySelector('body').style.overflow = ''
},
}
mounted() {
// 弹窗显示时,增加监听事件,阻止默认行为
this.fn = (e) => {
e.preventDefault()
}
this.$refs.healthplan.querySelector('.dialog').addEventListener('touchmove', this.fn)
},
// 页面销毁时,移除监听事件
beforeDestroy() {
this.$refs.healthplan.querySelector('.dialog ').removeEventListener('touchmove', this.fn)
document.querySelector('body').style.overflow = ''
}
更多推荐
已为社区贡献7条内容
所有评论(0)