完美解決vue項目中彈出框滑動時，內部頁面也跟着滑動問題

原文地址  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()