关于弹窗滚动穿透的问题

最新推荐文章于 2024-04-12 11:06:24 发布

爽儿儿儿

最新推荐文章于 2024-04-12 11:06:24 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Shuanger112/article/details/81702874

vue 专栏收录该内容

16 篇文章

订阅专栏

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

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

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