CSS无法用:not(:in-viewport)选择不可见元素，因浏览器无此伪类；应由JS用IntersectionObserver等打标（如is-offscreen），再由CSS响应类名，这是最稳定方案。
用
是行不通的
浏览器原生没有
伪类，更不存在
。试图靠 CSS 伪类直接选中“当前不可见”的元素，属于方向错误——CSS 选择器无法感知滚动位置或布局可见性。
真实场景里，所谓“不在屏幕内”，通常指：元素未进入视口（
返回值全在视口外），或被父容器裁剪（
+
等导致渲染不可见），或被
/
主动隐藏。这三类原因对应完全不同的检测逻辑，不能混为一谈。
给元素打标记比“动态选中”更可靠
与其让 CSS 实时判断是否可见，不如由 JS 主动观测、打标，再让 CSS 基于类名响应。这是目前最稳定、可预测的做法。
用
监听元素是否进入/离开视口，触发时添加/移除
类
对被
裁剪的容器，需额外计算子元素相对于容器的
，手动加
类
避免用
/
手动轮询判断——性能差、不兼容
或
场景
示例：
这类功能性类名该怎么命名
类名必须表达意图，而非状态来源。写成
或
会锁死实现逻辑，后期换成
或服务端渲染就崩了。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
推荐用中性、语义化前缀：
、
、
避免和现有样式冲突：比如已有
表示
，那就别再用
表示“暂时不可见”
如果只是临时视觉隐藏（比如动画过渡），用
比
更准确
纯 CSS 方案只适用于极简静态场景
如果你的页面没有滚动、没有动态插入、所有容器都是标准文档流且无
，那可以用一些取巧方式：
给容器设
，再用
配合 hover 触发（但仅限悬停场景）
利用
或
配合
控制显隐——但这不是“选择”，而是主动控制
放弃“选择不可见元素”，改用
查询容器尺寸，在容器变小时应用不同样式（需现代浏览器支持）
这些都不是真正意义上的“选择不在屏幕内的元素”，只是在特定约束下模拟类似效果。
真正难的从来不是怎么写那行 CSS，而是搞清“不可见”到底由谁决定、何时变化、要不要响应式更新——这些边界一旦模糊，JS 打标就变成唯一靠谱路径。
:not(:in-viewport):in-viewport:not(:in-viewport)getBoundingClientRect()overflow: hiddentransformdisplay: nonevisibility: hiddenIntersectionObserveris-in-viewportoverflow: hiddenboundingClientRectis-clippedoffsetTopscrollToptransformposition: stickyconst observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
entry.target.classList.toggle('is-in-viewport', entry.isIntersecting)
})
})
observer.observe(document.querySelector('#my-element')).is-offscreen.is-hidden-by-js.was-scrolled-awayResizeObserveris-offscreenis-unmountedis-collapsed.hiddendisplay: none.hiddenis-fading-outis-offscreentransformcontain: layout:has(> .target:not(:hover))clip-pathmask@keyframes@container