vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

短命女 2022-10-16 02:59 250阅读 0赞

> **弹出层时，蒙版下还可以滚动页面**

### 移动端 ###

> 在蒙层所在div上加 `@touchmove.prevent`

### PC端 ###

> **`弹层显示时`调用 stopMove()`停止页面滚动` ，`弹层消失时`调用 Move()`开启页面滚动`**

//停止页面滚动
    stopMove(){
      let m = function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
    },
    //开启页面滚动
    Move(){
      let m =function(e){e.preventDefault();};
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",m,{ passive:true });
    }

--------------------

## vue封装 ##

directives: {
      fixed: {
    	// inserted 被绑定元素插入父节点时调用
    	inserted () {
    	  let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    	  document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
    	},
    	// unbind 指令与元素解绑时调用
    	unbind () {
    	  let body = document.body
    	  body.style.position = ''
    	  let top = body.style.top
    	  document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
    	  body.style.top = ''
    	}
      }
    },

## 自定义指令使用 ##

>  该指令的**注意点**是必须使用`v-if`来**开启关闭弹窗**，因为该指令**依赖于dom的插入和注销**，使用`v-show`是肯定不行的。