js使弹层下面的body禁止滚动
短信预约 -IT技能 免费直播动态提醒
弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为。
1.新建utils/modalHelper.js文件
// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
let _scrollTop
class ModalHelper {
// popup 显示时调用
static afterOpen () {
_scrollTop = document.scrollingElement.scrollTop
document.body.style.position = 'fixed'
document.body.style.top = -_scrollTop + 'px'
}
// popup 关闭时调用
static beforeClose () {
document.body.style.position = ''
document.body.style.top = ''
// 使 scrollTop 恢复原状
document.scrollingElement.scrollTop = _scrollTop
}
}
export default ModalHelper2.main.js中全局引入ModalHelper
import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper3.vue页面使用
isPayment1(val) {
if (val) {
this.$modalHelper.afterOpen(); // 打开禁用
} else {
this.$modalHelper.beforeClose(); // 关闭禁用
}
},4.为避免用户使用按键返回，需在页面离开时移除禁用即可
beforeRouteLeave (to, from, next) {
this.$modalHelper.beforeClose()
next()
},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
