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

最新推荐文章于 2024-07-13 22:56:07 发布

原创最新推荐文章于 2024-07-13 22:56:07 发布 · 744 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

本文介绍了一种解决弹框内容滑动时带动底层页面滑动的问题的方法。通过使用`position: fixed`将弹框固定在视窗，并记录及同步页面的滚动位置，从而改善用户体验。

项目场景：

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

问题描述

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

解决方案：

解决思路：

要阻止页面滚动，那么何不将其固定在视窗（即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)
}