当 scrollHeight > clientHeight 时，垂直方向发生内容溢出；因 scrollHeight 含不可见内容高度，clientHeight 仅为可见区域高度（不含边框/滚动条），差值即被裁剪像素数。
直接结论：当 scrollHeight > clientHeight 时，垂直方向发生内容溢出；但必须确保元素已渲染、有明确高度且 overflow 不为 visible，否则判断失效。
为什么 scrollHeight > clientHeight 能判断溢出
因为 scrollHeight 是内容总高度（含不可见溢出部分），clientHeight 是当前可见区域高度（仅内容+内边距，不含边框和滚动条）。两者差值就是被裁剪掉的像素数。这个比较不依赖滚动条是否实际出现——哪怕 overflow: hidden，只要内容撑高了容器，scrollHeight 就会大于 clientHeight。
注意：offsetHeight 包含边框，不适合做此对比；scrollWidth/clientWidth 才用于水平溢出判断。
常见失败场景和修复方式
实际写代码时，90% 的“判断不准”都源于以下情况：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 元素尚未挂载或 DOM 未完成渲染：Vue 的
onMounted或 React 的useEffect中直接读取，可能拿到0—— 改用ResizeObserver监听尺寸就绪，或在setTimeout(() => { ... }, 0)中延迟读取 - CSS 高度未生效：父容器没设
height或max-height，子元素是height: auto，此时clientHeight等于内容自然高度，永远等于scrollHeight—— 必须给容器加明确的height或max-height，并设overflow: auto/hidden - 字体加载中或图片未加载：文字高度受字体影响，
font-display: swap可能导致重排 —— 在document.fonts.ready后再判断，或监听load事件
一个可靠可用的判断函数
下面这个函数绕开了大部分陷阱，适用于原生 JS 和主流框架：
function isOverflowingVertically(element) {
if (!element || !element.isConnected) return false;
const style = getComputedStyle(element);
// 必须有可滚动的约束条件
if (style.overflow === 'visible' || style.height === 'auto') return false;
return element.scrollHeight > element.clientHeight;
}
使用示例：
const box = document.getElementById('text-box');
if (isOverflowingVertically(box)) {
box.classList.add('has-overflow');
}
注意：不要在 display: none 元素上读取，它所有尺寸都是 0；也不要对 inline 元素用——它们没有 clientHeight 概念。
Vue/React 中特别容易踩的坑
在响应式框架里，DOM 变化和状态更新不同步，导致“刚赋值完文本就去读高度”，结果还是 0：
- Vue：避免在
onMounted里立刻读ref的scrollHeight；改用nextTick+setTimeout组合，或用ResizeObserver实例监听 - React：不要在
useEffect(() => { ... }, [text])里直接读 ref 尺寸；加个requestAnimationFrame或ResizeObserver更稳妥 - 通用建议：把判断逻辑封装成自定义 Hook / Composable，内部自动处理防抖和重试，而不是每次手写
最麻烦的其实是“折叠展开”这类交互：用户点击“展开”后，内容高度突变，但浏览器还没重绘，clientHeight 还是旧值——这时候得等下一帧再比，或者用 getBoundingClientRect() 辅助验证。
