vue 解决移动端滚动穿透

弹框滑动穿透问题

问题描述

在组件A里面添加了弹框，A页面是列表，弹框里面也是列表，当弹框里面的内容超过页面高度时弹框出现滑动，随之A页面也出现了滑动，解决方法如下：

在弹窗打开的时候给body的全局滚动设置position:fixed属性，并设置top值；由于设置了fixed属性，那在弹窗的时候body就没有滚动条了。此时如果这么设置会发现body虽然没有了滚动穿透，但是原来的位置丢失了。所以再给body设置fixed属性的时候，要把当前的滚动位置赋值给css的top属性，那在视觉上就没有任何变化了。

	<template>
	  <div v-fixed></div>
	</template>
    <script>
     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 = ''
	      }
	    }
     },
    </script>