模态框内可展开折叠模块的CSS滚动控制与背景锁定问题求助

问题1：设置overflow:scroll后模态内文本无法约束滚动 #

常见失效根因 #

• 未给滚动容器设置明确的高度上限，容器高度会随内容自动撑开，永远不会触发滚动条
• 采用flex/grid布局搭建模态结构时，未给作为滚动区域的子项设置min-height: 0，默认子项的最小高度为auto，会被内容撑破父容器的高度限制，导致overflow规则失效
• 视口高度计算逻辑错误，使用固定100vh在移动端会出现视口高度和实际可视范围不匹配的问题，滚动区域被判定为未超出可视范围

对应修复代码 #

/* 全屏遮罩层 */
.modal-overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 1rem;
}
/* 模态卡片容器 */
.modal-card {
  width: min(90vw, 600px);
  /* 用动态视口单位计算最大高度，适配移动端地址栏伸缩场景 */
  max-height: calc(100dvh - 2rem);
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
/* 内置问答的滚动内容区 */
.modal-content {
  /* 关键：重置flex子项的默认最小高度，解除内容撑破限制 */
  min-height: 0;
  /* 仅在内容溢出时显示纵向滚动条 */
  overflow-y: auto;
  /* 阻止滚动链式触发，避免滚动到边界时带动背景页滚动 */
  overscroll-behavior: contain;
}

问题2：overflow:hidden规则无法锁定背景页面滚动 #

常见失效根因 #

• 选择器匹配逻辑错误：使用:checked + body{overflow:hidden !important}的写法，要求被勾选的元素是body的直接相邻前兄弟节点，但实际DOM结构中用于切换模态的隐藏checkbox是body的子元素，二者为父子层级而非兄弟层级，选择器永远无法匹配到目标节点，规则不会生效

对应修复代码（纯CSS无JS版） #

利用主流浏览器已全面支持的:has()选择器实现状态匹配，完全不需要写JS逻辑：

/* 当模态开关checkbox被勾选时，锁死页面根节点和body的滚动权限 */
html:has(#modalToggle:checked),
html:has(#modalToggle:checked) body {
  overflow: hidden !important;
  height: 100dvh;
}
/* 模态显示逻辑 */
#modalToggle:checked ~ .modal-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

如果需要兼容旧版本不支持:has()的浏览器，仅需添加不到10行的极简JS实现，完全符合最少JS的开发原则：

const modalToggle = document.querySelector('#modalToggle')
modalToggle.addEventListener('change', () => {
  document.body.style.overflow = modalToggle.checked ? 'hidden' : ''
})

补充优化点 #

• 所有滚动容器必须添加overscroll-behavior: contain规则，即便锁定了body滚动，也能避免模态内滚动到内容边界时触发的链式滚动穿透
• 避免使用100vh做高度计算，替换为100dvh动态视口单位，解决移动端场景下的高度不匹配问题

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