分享弹框后还能滚动问题（禁用滚动条）

海之蓝心

已于 2023-06-30 16:03:22 修改

阅读量140

点赞数 1

文章标签： javascript 前端 html

于 2023-06-29 18:28:54 首次发布

本文链接：https://blog.csdn.net/qq_37550593/article/details/131462001

版权

pc和mobile网页都可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>Title</title>
    <style>
      body {
        /*一定要margin为0*/
        margin: 0;
      }
      /*本来是body也滚动，这样只需滚动主体内容*/
      .container {
        height: 100vh;
        overflow-y: scroll;
      }
      .modal {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #ccc;
      }
      .close {
        position: absolute;
        top: 30px;
        right: 30px;
      }
    </style>
</head>
<body>
<!--主要内容-->
<div class="container">
  <header>header</header>
  <button class="show">显示</button>
  <p style="height: 300vh"></p>
  <footer>footer</footer>
</div>
<!--弹框 -->
<div class="modal">
  <button class="close">关闭</button>
</div>
<script>
  // 显示弹框
  document.getElementsByClassName('show')[0].onclick = function() {
    document.getElementsByClassName('modal')[0].style.display = 'block'
  }
  // 关闭弹框
  document.getElementsByClassName('close')[0].onclick = function() {
    document.getElementsByClassName('modal')[0].style.display = 'none'
  }
</script>
</body>
</html>

网上有css 给html,body 设置overflow，解除滚动条绑定之类的方法都存在问题。这个方法没问题。