css无法用:not(:in-viewport)选择不可见元素，因浏览器无此伪类；应由js用intersectionobserver等打标（如is-offscreen），再由css响应类名，这是最稳定方案。
用 :not(:in-viewport) 是行不通的
浏览器原生没有 :in-viewport 伪类，更不存在 :not(:in-viewport)。试图靠 CSS 伪类直接选中“当前不可见”的元素，属于方向错误——CSS 选择器无法感知滚动位置或布局可见性。
真实场景里，所谓“不在屏幕内”，通常指：元素未进入视口（getBoundingClientRect() 返回值全在视口外），或被父容器裁剪（overflow: hidden + transform 等导致渲染不可见），或被 display: none/visibility: hidden 主动隐藏。这三类原因对应完全不同的检测逻辑，不能混为一谈。
给元素打标记比“动态选中”更可靠
与其让 CSS 实时判断是否可见，不如由 JS 主动观测、打标，再让 CSS 基于类名响应。这是目前最稳定、可预测的做法。
- 用
IntersectionObserver监听元素是否进入/离开视口，触发时添加/移除is-in-viewport类 - 对被
overflow: hidden裁剪的容器，需额外计算子元素相对于容器的boundingClientRect，手动加is-clipped类 - 避免用
offsetTop/scrollTop手动轮询判断——性能差、不兼容transform或position: sticky场景
示例：
const 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-away 会锁死实现逻辑，后期换成 ResizeObserver 或服务端渲染就崩了。
- 推荐用中性、语义化前缀：
is-offscreen、is-unmounted、is-collapsed - 避免和现有样式冲突：比如已有
.hidden表示display: none，那就别再用.hidden表示“暂时不可见” - 如果只是临时视觉隐藏（比如动画过渡），用
is-fading-out比is-offscreen更准确
纯 CSS 方案只适用于极简静态场景
如果你的页面没有滚动、没有动态插入、所有容器都是标准文档流且无 transform，那可以用一些取巧方式：
- 给容器设
contain: layout，再用:has(> .target:not(:hover))配合 hover 触发（但仅限悬停场景） - 利用
clip-path或mask配合@keyframes控制显隐——但这不是“选择”，而是主动控制 - 放弃“选择不可见元素”，改用
@container查询容器尺寸，在容器变小时应用不同样式（需现代浏览器支持）
这些都不是真正意义上的“选择不在屏幕内的元素”，只是在特定约束下模拟类似效果。
真正难的从来不是怎么写那行 CSS，而是搞清“不可见”到底由谁决定、何时变化、要不要响应式更新——这些边界一旦模糊，JS 打标就变成唯一靠谱路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
