完美解决弹出页面弹出层时背景可滚动问题

最新推荐文章于 2022-09-14 16:12:53 发布

bisai_liliu

最新推荐文章于 2022-09-14 16:12:53 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术技术文章标签：前端 js 滚动弹出底层

本文链接：https://blog.youkuaiyun.com/bisai_liliu/article/details/90406948

技术同时被 2 个专栏收录

5 篇文章

订阅专栏

前端技术

1 篇文章

订阅专栏

1.公共函数代码

function bodyScroll(event){  
    event.preventDefault();  
}

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

2.弹出时候加入代码

stopBodyScroll(true);
document.body.addEventListener('touchmove',bodyScroll,{ passive: false });  
$('body').css({'position':'fixed',"width":"100%"});

3.关闭弹出时候加入代码

stopBodyScroll(false);
document.body.removeEventListener('touchmove',bodyScroll,{ passive: false });   
$("body").css({"position":"initial","height":"auto"});

实现逻辑：

首先需要获取到你弹出层点击事件的时候，你当前页面的位置，即你页面沿x轴滚动距离顶部的高度。然后绝对定位到当前高度，这样就可以保持底层页面不会动，然后添加touchmove的监听事件。禁止滑动。

关闭的时候，页面回到原来的定位位置，去掉touchmove监听事件。

注意：代码顺序

本人的一些解决办法，希望相互学习。