CSS禁止页面滚动|极客教程

CSS禁止页面滚动

在网页开发中，有时候我们需要禁止页面滚动，例如在弹出层或者菜单展开时，防止用户继续滚动页面。通过CSS的一些属性和技巧，我们可以实现这个功能。本文将详细介绍如何使用CSS禁止页面滚动。

使用`overflow: hidden`

最简单的方法是使用CSS属性overflow: hidden来禁止页面滚动。通过给html和body元素添加这个属性，可以实现页面滚动的禁止。

html, body {
  overflow: hidden;
}

使用`position: fixed`

另一种方法是利用position: fixed属性来固定页面的位置，从而禁止页面滚动。

html, body {
  position: fixed;
  width: 100%; /* 保持原始宽度 */
}

使用JavaScript

除了纯CSS的方法，我们也可以使用JavaScript来禁止页面滚动。例如，在弹出层出现时，通过添加一个类名来实现页面禁止滚动。

<button id="openModal">打开弹出层</button>
<div id="modal" class="modal">
  <div class="modal-content">
    <p>这是一个弹出层</p>
    <button id="closeModal">关闭</button>
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

const openModalBtn = document.getElementById('openModal');
const closeModalBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');

openModalBtn.addEventListener('click', () => {
  modal.style.display = 'block';
  document.body.style.overflow = 'hidden';
});

closeModalBtn.addEventListener('click', () => {
  modal.style.display = 'none';
  document.body.style.overflow = 'auto';
});

在这个示例中，当点击“打开弹出层”按钮时，弹出层会显示并禁止页面滚动。点击“关闭”按钮时，弹出层消失并允许页面滚动。