900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue3实现遮罩层外部禁止页面滚动 内部可滚动

vue3实现遮罩层外部禁止页面滚动 内部可滚动

时间:2018-09-14 16:48:51

相关推荐

vue3实现遮罩层外部禁止页面滚动 内部可滚动

方法一:直接在遮罩层添加 @touchmove.prevent ,可以实现禁止页面滚动,但是同时遮罩层内部也无法滚动了。适用于内部不需滚动的场景。

方法二:(此方法可以实现需求,但是关闭遮罩层后主页面会滑动到顶部,无法回到原来的浏览位置)

function mo = function(e){e.preventDefault();};//禁止滚动-在显示遮罩层的时候调用function stop(){document.body.style.overflow = 'hidden';document.addEventListener("touchmove", mo, false);},// 取消滑动限制-在关闭遮罩层的时候调用function move(){document.body.style.overflow = '';//出现滚动条document.removeEventListener("touchmove", mo, false);}

方法三:(推荐:此方法不仅可以实现需求,还会记录打开遮罩层时的位置,使关闭后仍然停在原来的位置)

// 记录页面滚动位置const pageLocation = ref('');// 禁止滚动-在显示遮罩层的时候调用function stop(e) {let scrollTop = window.scrollY;//滚动的高度;pageLocation.value = scrollTop;document.body.style.position = 'fixed';document.body.style.top = '-' + scrollTop + 'px';};// 取消滑动限制-在关闭遮罩层的时候调用function move() {document.body.style.position = 'static';window.scrollTo(0, pageLocation.value);}

如果帮到你了,给我点个赞鼓励一下吧😁

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。