如何查询容器高度是否超出视口？容器查询现状探讨

问题核心 #

你尝试通过容器查询实现：当.container内容超出视口（容器出现滚动）时将文本变为红色，但当前CSS写法无法生效，核心原因在于百分比高度容器的尺寸查询限制。

为什么当前方法行不通 #

容器查询的container-type: size要求容器具备独立的、可确定的尺寸，而height: 100%属于依赖父元素（此处为body/视口）的百分比高度，容器的实际高度由视口决定，但内容高度由自身内容撑持。这种场景存在渲染循环风险：浏览器无法同时计算容器高度和基于该高度的样式变化（即便你的样式不改变高度，规范也会规避潜在循环），因此CSS规范明确限制这类依赖外部或内容尺寸的容器，无法进行基于高度的容器查询。

容器查询的当前发展现状 #

• 稳定支持（Level 3）：主流浏览器已支持CSS容器查询Level 3，核心能力是基于容器的显式固定尺寸（如height: 600px）或行内尺寸（container-type: inline-size，用于响应容器宽度变化），但对依赖内容或父元素的动态高度查询仍不支持。
• 未来草案（Level 4）：CSS容器查询Level 4草案提及「内容尺寸查询」的可能性，允许基于容器的scrollHeight或内容实际占用尺寸判断，但目前仅处于讨论阶段，无浏览器实现该特性。
• 社区反馈：大量开发者提出过类似需求（检测容器是否滚动），但纯CSS层面暂无解决方案，必须结合JavaScript实现。

可行的替代方案 #

通过JavaScript检测容器滚动状态，动态添加类名，再用CSS针对类名设置样式：

完整代码示例 #

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  overflow: auto;
}

/* 滚动状态下的样式 */
.container.is-scrolling p {
  color: red;
}

<div class="container">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae quasi a eveniet! Magni dicta autem cumque quisquam? Nesciunt, tempore, architecto ad quisquam, omnis iusto veritatis quidem autem sint officia eius!</p>
</div>

const container = document.querySelector('.container');

function checkScrollState() {
  // 判断内容高度是否超过容器可视高度
  const isScrolling = container.scrollHeight > container.clientHeight;
  container.classList.toggle('is-scrolling', isScrolling);
}

// 初始检查
checkScrollState();
// 窗口大小变化时重新检查
window.addEventListener('resize', checkScrollState);

该方案可准确检测容器是否滚动，兼容所有现代浏览器。

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