如何实现用户点击指定标签前禁止页面向下滚动？

这是完全可行的，核心逻辑是：默认状态下锁定页面滚动并隐藏后续内容，当用户切换到最后一个「3/3」标签时，解除滚动限制并展示后续内容。

1. CSS 基础配置 #

首先通过CSS实现滚动锁定和内容隐藏的初始状态，以及解锁后的过渡效果：

/* 默认锁定页面滚动 */
body.scroll-locked {
  overflow: hidden;
  height: 100vh;
  /* 兼容iOS触摸滚动 */
  touch-action: none;
}

/* 默认隐藏后续内容区域 */
.to-next {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 解锁后显示后续内容 */
.to-next.active {
  display: block;
  opacity: 1;
}

2. JavaScript 交互逻辑 #

监听单选框的切换事件，判断是否选中最后一个tab，进而切换滚动状态和内容显示：

// 获取所有tab单选框和后续内容区域
const tabRadios = document.querySelectorAll('input[name="slider"]');
const nextSection = document.querySelector('.to-next');

// 初始化：锁定滚动
document.body.classList.add('scroll-locked');

// 为每个单选框添加切换监听
tabRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.id === 'both') {
      // 切换到最后一个tab：解锁滚动+显示内容
      document.body.classList.remove('scroll-locked');
      nextSection.classList.add('active');
    } else {
      // 切换回前两个tab：重新锁定（可选，根据需求决定是否保留）
      document.body.classList.add('scroll-locked');
      nextSection.classList.remove('active');
    }
  });
});

3. 完整整合示例 #

将你的HTML结构与上述CSS、JS整合后，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabs Scroll Lock</title>
  <style>
    /* 你的原有Tabs样式 */
    .tabs {
      margin-bottom: 2rem;
    }
    .box {
      display: none;
    }
    input[name="slider"]:checked + .buttons + .content .box {
      display: none;
    }
    input#age:checked + .buttons + .content .age {
      display: flex;
    }
    input#ethnicity:checked + .buttons + .content .ethnicity {
      display: flex;
    }
    input#both:checked + .buttons + .content .both {
      display: flex;
    }

    /* 滚动锁定与内容控制样式 */
    body.scroll-locked {
      overflow: hidden;
      height: 100vh;
      touch-action: none;
    }
    .to-next {
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
    }
    .to-next.active {
      display: block;
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="tabs">
      <input id="age" type="radio" name="slider" checked>
      <input id="ethnicity" type="radio" name="slider">
      <input id="both" type="radio" name="slider">
      <div class="buttons">
        <label for="age">1/3</label>
        <label for="ethnicity">2/3</label>
        <label for="both">3/3</label>
      </div>
      <div class="content">
        <div class="box age">
          <div class="chart-parent">
            <canvas id="myChart2"></canvas>
          </div>
          <div class="description">
            <h1>Age</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem placeat unde illum doloremque cumque beatae veritatis nulla, culpa autem sed.</p>
          </div>
        </div>
        <div class="box ethnicity">
          <div class="chart-parent">
            <canvas id="myChart"></canvas>
          </div>
          <div class="description">
            <h1>Race/Ethnicity</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem placeat unde illum doloremque cumque beatae veritatis nulla, culpa autem sed.</p>
          </div>
        </div>
        <div class="box both">
          <div class="chart-parent">
            <canvas id="chart"></canvas>
          </div>
          <div class="description">
            <h1>Race/Ethnicity vs. Age</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem placeat unde illum doloremque cumque beatae veritatis nulla, culpa autem sed.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="to-next">
    <div class="next-content">
      <h1>Next</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam ad iure quisquam culpa corporis eius praesentium eos neque voluptatibus nesciunt, dolor doloribus, sapiente iusto dicta consequatur sunt illum, nulla facilis explicabo. Incidunt ut dicta esse voluptas cupiditate, ducimus id molestiae reprehenderit? Ad, ipsum et. Laudantium possimus veritatis necessitatibus saepe molestias.</p>
    </div>
  </div>

  <script>
    const tabRadios = document.querySelectorAll('input[name="slider"]');
    const nextSection = document.querySelector('.to-next');

    document.body.classList.add('scroll-locked');

    tabRadios.forEach(radio => {
      radio.addEventListener('change', () => {
        if (radio.id === 'both') {
          document.body.classList.remove('scroll-locked');
          nextSection.classList.add('active');
        } else {
          document.body.classList.add('scroll-locked');
          nextSection.classList.remove('active');
        }
      });
    });
  </script>
</body>
</html>

可选优化 #

• 如果不需要切换回前两个tab时重新锁定滚动，可以删除else块内的代码
• 若要增强用户提示，可在未解锁时添加滚动拦截提示（比如固定在底部的提示条）
• 对于iOS设备，overflow: hidden可能无法完全锁定滚动，可额外添加position: fixed到body，但会导致滚动位置重置，需要提前保存滚动位置

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