解决弹出popup后底部html可以滚动的问题

vue项目解决此问题

1. 在utils文件夹下创建一个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 ModalHelper ​

这里有三种解决方案，上文是一种

一种是直接将body的position属性改为fixed，另外一种是将body的overflow改为hidden且height:100%;（主要用于桌面端，移动端有兼容性问题）

另外一种是监听touch事件 阻止默认事件，但这样实现比较复杂

1. 在main.js中引入

    import ModalHelper from '@/utils/modalHelper'
    Vue.prototype.$modalHelper = ModalHelper//防止弹出层滚动
   

   将函数中的两个事件作为全局可以使用的属性

   1. 在唤起/关闭弹窗时调用

      openHistoryPopup() { this.isPopupHistoryShow = true this.modalHelper.afterOpen() }, closeHistoryPopup() { this.isPopupHistoryShow = false this.modalHelper.beforeClose() },

这样弹出popup时底部body,html元素便不再会滚动