在打开模式时防止正文滚动 (1)

📌 相关文章

📜 在打开模式时防止正文滚动 (1)

📅 最后修改于: 2023-12-03 15:23:33.155000 🧑 作者: Mango

在打开模式时防止正文滚动

在某些情况下，我们需要在弹出窗口或者特定容器中展示一段 HTML 内容。一般来说，容器都是设定固定的高度，如果内容超出容器高度，会自动出现滚动条。但是，有时候我们不希望内容出现滚动条，而是希望内容超出容器后自动裁剪，不允许滚动。以下是一些可以防止滚动发生的方法。

1. 使用 CSS 属性 overflow

CSS 属性 overflow 可以控制容器中内容的溢出情况，常见的属性值为 auto、hidden、scroll。其中，auto 表示自动根据内容需要添加滚动条，hidden 表示隐藏溢出内容，scroll 表示始终显示滚动条。如果我们想要禁止滚动条出现，只需将 overflow 属性设置为 hidden 即可。

.container {
  max-height: 500px;
  overflow: hidden;
}

2. 使用 JavaScript 和 CSS 实现

如果需要在弹出窗口中展示 HTML 内容，可以使用 JavaScript 和 CSS 实现。首先，通过 JavaScript 获取弹出窗口的高度，然后通过 CSS 设置内容区域的 max-height 属性，当内容超出弹出窗口高度时，就不会出现滚动条。

<html>
  <head>
    <style>
      .content {
        max-height: 500px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="popup">
      <div class="content">
        <!-- 在这里添加 HTML 内容 -->
      </div>
    </div>
    <script>
      var popup = document.querySelector('.popup');
      var content = document.querySelector('.content');
      // 获取弹出窗口高度
      var popupHeight = popup.clientHeight;
      // 设置内容区域高度
      content.style.maxHeight = popupHeight + 'px';
    </script>
  </body>
</html>

3. 利用计算属性

利用 JavaScript 的计算属性，在内容插入后动态计算是否需要显示滚动条。如果内容过长，就隐藏超出部分，不允许滚动。需要注意的是，这种方法必须在内容插入后才能生效。

<div class="container">
  <div class="content">
    <!-- 在这里添加 HTML 内容 -->
  </div>
</div>
<script>
var content = document.querySelector('.content');
// 判断内容是否超出容器高度
if (content.clientHeight < content.scrollHeight) {
  // 隐藏超出内容，不允许滚动，计算出实际内容高度
  content.style.overflowY = 'hidden';
  var height = content.clientHeight;
  content.style.overflowY = 'auto';
  content.style.maxHeight = height + 'px';
} else {
  // 不需要限制内容高度
  content.style.overflowY = 'auto';
}
</script>

以上是一些常见的防止滚动的方法，根据不同的需求和场景选择不同的方法，可以实现自定义的展示效果。