HTML内嵌元素滚动问题：仅滚动目标元素不滚动body

核心问题分析 #

你之前的方案失效，本质是滚动元素没有明确的高度约束——浏览器无法判断内容是否超出容器，所以滚动条存在但无法交互。要实现需求，必须确保：

1. 根元素（html/body）占满视口高度，且隐藏自身滚动
2. 顶部固定元素占用明确的视口比例
3. 滚动区域占用剩余视口高度，同时开启垂直滚动

方案一：使用vh单位（现代浏览器优先） #

这种方案代码简洁，适配Chrome、Firefox、Safari、IE11及以上版本。

HTML结构

<body>
  <!-- 顶部固定内容，始终可见 -->
  <div class="top-content">
    <h1>固定标题</h1>
    <p>这部分内容不会随滚动移动</p>
  </div>

  <!-- 底部可滚动区域 -->
  <div class="scroll-container">
    <!-- 大量文本内容 -->
    <p>...</p>
  </div>
</body>

CSS样式

/* 重置默认边距，确保根元素占满视口 */
html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* 隐藏body滚动条 */
}

/* 顶部内容占视口1/4高度 */
.top-content {
  height: 25vh;
  padding: 1.5rem;
  box-sizing: border-box; /* 内边距计入高度，避免超出 */
  background: #f5f5f5;
}

/* 滚动区域占视口剩余3/4高度 */
.scroll-container {
  height: 75vh;
  overflow-y: auto; /* 内容超出时自动显示滚动条，无超出则隐藏 */
  padding: 1.5rem;
  box-sizing: border-box;
}

方案二：绝对定位（兼容老旧浏览器） #

如果需要兼容IE9及更早版本，用绝对定位替代vh单位，兼容性更强。

CSS样式

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  position: relative; /* 为子元素绝对定位提供参照 */
}

.top-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%; /* 占父元素（body）高度的1/4 */
  padding: 1.5rem;
  box-sizing: border-box;
  background: #f5f5f5;
}

.scroll-container {
  position: absolute;
  top: 25%; /* 从顶部25%位置开始 */
  left: 0;
  right: 0;
  bottom: 0; /* 延伸至视口底部 */
  overflow-y: auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

关键注意事项 #

• 必须给html和body设置height: 100%或100vh，否则子元素的百分比高度无法生效
• 使用box-sizing: border-box确保内边距不会让元素超出设定高度
• 用overflow-y: auto替代scroll，可以在内容未超出时隐藏滚动条，提升体验

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