@media (overflow-block: scroll) 无效，因该特性未被任何主流浏览器支持，也不在CSS媒体查询规范中；检测块方向溢出只能通过JavaScript比较scrollHeight与clientHeight。
不是合法的 CSS 媒体查询特性，浏览器完全不支持。你无法用它检测块方向（即垂直方向）是否发生溢出。
为什么
无效
目前所有主流浏览器（Chrome、Firefox、Safari、Edge）均未实现
或
这类媒体特性。它们不属于 CSS Media Queries Level 4 或 Level 5 规范草案中的已实现特性，MDN、CanIUse 和 W3C 官方文档中均无此条目。试图在 CSS 中写
不会触发任何样式，也不会报错——只是被静默忽略。
真正能响应溢出状态的方案只有 JavaScript
CSS 本身不具备“感知内容是否溢出”的能力；媒体查询只响应视口、设备、系统偏好等外部状态，不响应元素内部布局结果。要判断某个元素是否在块方向（通常是垂直方向）溢出，必须靠 JS 比较尺寸：
表示发生了垂直溢出（块方向）
表示发生了水平溢出（内联方向）
注意：若
，需临时设为
再测，否则
可能等于
（见
函数逻辑）
替代思路：用
的值做静态预判
如果你控制 HTML/CSS，可基于已知的
overflow
设置和尺寸约束，提前推断行为，而非运行时检测：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
+ 固定
→ 溢出时出现滚动条（但无法用 media query “监听”这一状态变化）
→ 强制裁剪，无需检测
→ 滚动条始终存在，布局空间固定，适合对齐设计
这种预判适用于构建组件库或设计系统，但不是动态响应式检测。
真正需要运行时判断溢出，就老实用
/
——别在 media query 里绕弯子，那条路根本没修好。
@media (overflow-block: scroll)@media (overflow-block: scroll)overflow-blockoverflow-inline@media (overflow-block: scroll) { ... }el.scrollHeight > el.clientHeightel.scrollWidth > el.clientWidthel.style.overflow === "visible""hidden"clientHeightscrollHeightcheckOverflowoverflowoverflow-y: autoheightoverflow-y: hiddenoverflow-y: scrollscrollHeightclientHeight