弹框滑动带动底层页面滑动的解决方案

项目场景：

点击事件，出现弹框，并对内容进行滑动。

---

问题描述

弹框内容滑动，带动底层页面的滑动，影响体验感

---

解决方案：

解决思路：

要阻止页面滚动，那么何不将其固定在视窗（即position: fixed），这样它就无法滚动了，当蒙层关闭时再释放。

提示：一些细节要考虑，将页面固定视窗后，内容会回头最顶端，这里需要记录一下，同步top值。

let bodyEl = document.body
let top = 0
 
function stopBodyScroll (isFixed) {
 if (isFixed) {
 top = window.scrollY
 
 bodyEl.style.position = 'fixed'
 bodyEl.style.top = -top + 'px'
 } else {
 bodyEl.style.position = ''
 bodyEl.style.top = ''
 
 window.scrollTo(0, top) // 回到原先的top
 }
}

vue项目实际使用的思路

//vue的写法
//data 存个变量
  top:0
stopScroll(){
	this.top = window.scrollY
	var mo = function (e){
	    e.preventDefult()
	} 
	document.body.style.position = 'fixed' 
	document.body.style.top= -this.top + 'px'
	document.addEventListener("touchmove",mo,false)
}
canveScroll(){
	var mo = function (e){
	    e.preventDefult()
	} 
	document.body.style.position = '' 
	document.body.style.top= ''
	window.scrollTop(0,this.top) 
	document.removeEventListener("touchmove",mo,false)
}