原文地址 https://www.jianshu.com/p/60db6cf91a69
在main.js中设置全局函数:
//弹出框禁止滑动
Vue.prototype.noScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = 'hidden' document.addEventListener('touchmove', mo, false)// 禁止页面滑动 } //弹出框可以滑动 Vue.prototype.canScroll = function () { var mo = function (e) { e.preventDefault() } document.body.style.overflow = ''// 出现滚动条 document.removeEventListener('touchmove', mo, false) }
在页面使用时:
//禁止主页面滑动
this.noScroll()
//主页面可滑动
this.canScroll()
因为当初是在苹果手机上的测试的,但是在安卓手机发现有些限制,于是解决办法为在main.js中设置全局函数:
// 弹出框显示后调用afterOpen,关闭弹出框前调用beforeClose
Vue.prototype.ModalHelper = (function (bodyCls) { var scrollTop return { afterOpen: function () { scrollTop = document.scrollingElement.scrollTop document.body.classList.add(bodyCls) document.body.style.top = -scrollTop + 'px' }, beforeClose: function () { document.body.classList.remove(bodyCls) // scrollTop lost after set position:fixed, restore it back. document.scrollingElement.scrollTop = scrollTop } } }('dialog-open'))
在需要的地方调用:
打开滑动: this.ModalHelper.beforeClose();
关闭滑动: this.ModalHelper.afterOpen()