关于弹窗滚动穿透的问题

本文介绍了一种解决网页中模态框打开时导致的滚动穿透问题的方法。通过在模态框打开和关闭时调整页面滚动位置,可以有效避免该问题带来的用户体验下降及潜在BUG。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

众所周知!滚动穿透真是一个遗臭万年的问题,困扰着许多程序猿的一大难题。

事发场景:

当在弹出的模态框上面进行拖动的时候,其下面的页面也会随之进行滚动,这真是一个很不好的用户体验,特定情况下也会产生比较严重的BUG。


下面我与大家分享一下解决这个遗臭万年问题的方法

modal: (function (bodyCls) {
   var scrollTop;
   return {
     afterOpen: function () {
       scrollTop = document.scrollingElement.scrollTop;
       document.body.classList.add(bodyCls);
       document.body.style.top = -scrollTop + 'px';
     },
     beforeClose: function () {
       document.body.classList.remove(bodyCls);
       document.scrollingElement.scrollTop = scrollTop;
     }
   };
 })('modal-open')

没错~ 以上代码中有两个方法,可以在弹窗弹出的时候和弹窗关闭的时候分别去调用,简单实用~

'mtPopup':{
  handler(val, oldVal){
    if(val){
       this.modal.afterOpen()
     }else{
       this.modal.beforeClose()
     }
   }
 }

依照当前项目的业务场景,我这里去监听了这个弹窗开关的状态从而分别调用不同的方法。

这样我们就可以将这个难缠的问题彻底解决掉了~

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值