当前位置: 首页 > Web前端 > vue.js

Vue中滚动穿透的问题

时间:2023-04-01 00:52:09 vue.js

场景:最近在项目开发中遇到了一个滚动穿透的问题。主页个人中心有个弹框。在弹窗打开时,在首页添加了遮罩层来防止。对其余内容进行操作,但是当滚轮滚动时,首页内容仍会滚动,导致效果不佳。解决方案:思路是打开弹窗时禁用浏览器的滚动事件,关闭弹窗时启用滚动事件。注意,跳转到其他组件时也应该启用滚动事件。具体代码如下://禁止页面滚动disableScroll(){letm=function(e){e.preventDefault();};document.body.style.overflow='隐藏';document.addEventListener("touchmove",m,{passive:false});},//滚动打开页面openScroll(){letm=function(e){e.preventDefault();};文档.body.style.overflow='';document.removeEventListener("touchmove",m,{passive:true});}补充移动端: