前端--移动端弹窗弹出后禁止页面滚动

最新推荐文章于 2024-05-25 21:30:40 发布

qlj224

最新推荐文章于 2024-05-25 21:30:40 发布

阅读量1.4k

点赞数

分类专栏： html 弹窗页面布局

本文链接：https://blog.csdn.net/qq_42760405/article/details/105712023

版权

html 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

弹窗

1 篇文章 0 订阅

订阅专栏

页面布局

1 篇文章 0 订阅

订阅专栏

问题描述

在做项目时，我碰到了一个问题，当浮层弹出后，浮层后面的内容仍可以滚动。

问题演示

在这里插入图片描述

解决方案

首先我们要明确，当浮层弹出后，我们操作的是body的滚动条，而不是其他div。

1.body出现滚动条

body出现滚动条。这种问题是应该避免，我认为合理的页面布局不应该让body出现滚动条。应该将内容放在div中，让div出现滚动条，这样可以很方便的处理各种问题。
如果你的布局不好改，也是有解决方法的。

首先在公共样式文件中添加一个类名

样式CSS：

.body-scrollCtrl {
  overflow: hidden!important;
  position: fixed; // 处理安卓和IOS的兼容问题，这样也会出现一个问题，就是浮层弹出后，页面会置顶
  width: 100%;
}

vue浮层组件，监听浮层的开关，弹出浮层，给body添加类名，关闭去除类名

watch: {
    showFlag(val) {
      if (val) {
        document.body.className = 'body-scrollCtrl';
      } else {
        document.body.removeAttribute('class', 'body-scrollCtrl');
      }
    },
  },

针对给body设置position: fixed；出现页面置顶的问题。可以在浮层弹出前记录body的scrollTop，浮层关闭后恢复即可。具体代码就不演示了

2.修改布局

个人认为body出现滚动条的布局都是不合理的，我们应该禁止body出现滚动条。
推荐布局—HTML，如果内容过多，使wrap出现滚动条，而不是body

<body>
  <div class="wrap">
    我们应该尽可能的操作wrap，而不是body
  </div>
</body>

CSS：给wrap设置height: 100vh，而不是100%。这是重点！！！设置成100%，出现滚动条仍然是body，而不是wrap。vh是相对viewport的高度，100vh等于100% * viewport的高度。此时wrap出现滚动条，但是浮层弹出后，页面也滚动不了，因为body没有滚动条，有滚动条的是wrap

<style>
  html,body {
    height: 100%;
  }
  .wrap {
    height: 100vh;
    overflow: scroll;
  }
</style>

效果展示

在这里插入图片描述

qlj224

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端--移动端弹窗弹出后禁止页面滚动

问题描述在做项目时，我碰到了一个问题，当浮层弹出后，浮层后面的内容仍可以滚动。错误演示解决方案首先我们要明确，当浮层弹出后，我们操作的是body的滚动条，而不是其他div。1.body出现滚动条body出现滚动条。这种问题是应该避免，我认为合理的页面布局不应该让body出现滚动条。应该将内容放在div中，让div出现滚动条，这样可以很方便的处理各种问题。如果你的布局不好改，也是有解...
复制链接

扫一扫

专栏目录