@media (overflow-block: scroll) 无效，因该特性未被任何主流浏览器支持，也不在css媒体查询规范中；检测块方向溢出只能通过javascript比较scrollheight与clientheight。
@media (overflow-block: scroll) 不是合法的 CSS 媒体查询特性，浏览器完全不支持。你无法用它检测块方向（即垂直方向）是否发生溢出。
为什么 @media (overflow-block: scroll) 无效
目前所有主流浏览器（Chrome、Firefox、Safari、Edge）均未实现 overflow-block 或 overflow-inline 这类媒体特性。它们不属于 CSS Media Queries Level 4 或 Level 5 规范草案中的已实现特性，MDN、CanIUse 和 W3C 官方文档中均无此条目。试图在 CSS 中写 @media (overflow-block: scroll) { ... } 不会触发任何样式，也不会报错——只是被静默忽略。
真正能响应溢出状态的方案只有 JavaScript
CSS 本身不具备“感知内容是否溢出”的能力；媒体查询只响应视口、设备、系统偏好等外部状态，不响应元素内部布局结果。要判断某个元素是否在块方向（通常是垂直方向）溢出，必须靠 JS 比较尺寸：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
el.scrollHeight > el.clientHeight表示发生了垂直溢出（块方向） -
el.scrollWidth > el.clientWidth表示发生了水平溢出（内联方向） - 注意：若
el.style.overflow === "visible"，需临时设为"hidden"再测，否则clientHeight可能等于scrollHeight（见checkOverflow函数逻辑）
替代思路：用 overflow 的值做静态预判
如果你控制 HTML/CSS，可基于已知的 overflow 设置和尺寸约束，提前推断行为，而非运行时检测：
-
overflow-y: auto+ 固定height→ 溢出时出现滚动条（但无法用 media query “监听”这一状态变化） -
overflow-y: hidden→ 强制裁剪，无需检测 -
overflow-y: scroll→ 滚动条始终存在，布局空间固定，适合对齐设计
这种预判适用于构建组件库或设计系统，但不是动态响应式检测。
真正需要运行时判断溢出，就老实用 scrollHeight / clientHeight ——别在 media query 里绕弯子，那条路根本没修好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
