关于移动端弹窗内容滚动底部页面不滚动的问题

最新推荐文章于 2023-11-02 20:03:45 发布

MrQiuGH

最新推荐文章于 2023-11-02 20:03:45 发布

阅读量1.3k

点赞数 1

分类专栏： Vue HTML和CSS 文章标签： css html vue.js

本文链接：https://blog.csdn.net/xh17864388739/article/details/122861997

版权

Vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML和CSS

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何在移动端实现弹窗显示时阻止底部内容区域滚动，同时确保弹窗内容区域的正常滚动。作者提供了两种解决方案：1) 使用touchmove事件阻止默认行为以禁用全部滚动，2) 将底部内容区域设置为fixed定位来实现目标效果。在弹窗关闭后，内容区恢复relative定位，允许再次滚动。这个话题对于前端开发者尤其是移动端UI交互设计有重要参考价值。

摘要由CSDN通过智能技术生成

弹窗内容区域可滚动，在显示弹窗的时候，底部内容区不能滚；关闭弹窗后，底部内容区可滚动。

1.弹窗内容区不需要滚动

直接在touchmove事件中设置e.preventDefault()；阻止默认事件，这样底部就不会滚动。但是弹窗内容也不会滚动了。

2.弹窗内容区需要滚动

显示弹窗时，让下面的页面 fixed 定位，弹窗消失时候，再还原 relative 定位。

.fixed {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

<div
  :class="{
    'fixed': modalShow
  }">
</div>