如何在弹出Modal时禁止页面body垂直滚动？

核心方案 #

你已经写了.modal-open {overflow-y: hidden;}这个CSS类，关键就是在Modal打开时把这个类加到body上，关闭时移除就行，具体实现如下：

1. 补全CSS样式（可选优化） #

除了隐藏滚动，还可以加个滚动条宽度补偿，避免页面因为滚动条消失突然晃动：

.modal-open {
  overflow-y: hidden;
  /* 用CSS变量存滚动条宽度，防止页面跳动 */
  padding-right: var(--scrollbar-width, 0px);
}

2. 修改JavaScript逻辑 #

找到你现有代码里打开Modal和关闭Modal的逻辑，分别添加类的操作：

打开Modal时的处理

假设你是通过点击卡片触发Modal打开，比如这样修改：

// 示例：点击卡片打开对应Modal
document.querySelectorAll('.card').forEach(card => {
  card.addEventListener('click', function() {
    const modalId = this.dataset.modalId; // 假设卡片上用data-modal-id存对应Modal的ID
    const modal = document.getElementById(modalId);
    modal.style.display = 'block';

    // 给body加禁止滚动的类
    document.body.classList.add('modal-open');
    // 计算滚动条宽度并设置CSS变量
    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
    document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
  });
});

关闭Modal时的处理

不管是点击关闭按钮还是遮罩层关闭，都要移除类：

// 示例：点击关闭按钮关闭Modal
document.querySelectorAll('.modal-close').forEach(btn => {
  btn.addEventListener('click', function() {
    const modal = this.closest('.modal');
    modal.style.display = 'none';

    // 移除body上的类，恢复滚动
    document.body.classList.remove('modal-open');
    document.body.style.removeProperty('--scrollbar-width');
  });
});

// 如果有遮罩层点击关闭的逻辑，也要加同样的移除操作
document.querySelectorAll('.modal-overlay').forEach(overlay => {
  overlay.addEventListener('click', function() {
    const modal = this.closest('.modal');
    modal.style.display = 'none';
    document.body.classList.remove('modal-open');
    document.body.style.removeProperty('--scrollbar-width');
  });
});

移动端额外处理（可选） #

如果在移动端发现背景还是能滚动，就加个触摸事件拦截：

// 定义阻止滚动的函数
function blockBackgroundScroll(e) {
  e.preventDefault();
}

// 打开Modal时绑定事件
document.body.classList.add('modal-open');
document.body.addEventListener('touchmove', blockBackgroundScroll, { passive: false });

// 关闭Modal时解绑事件
document.body.classList.remove('modal-open');
document.body.removeEventListener('touchmove', blockBackgroundScroll);

内容的提问来源于stack exchange，提问作者Tec