用 getBoundingClientRect() 判断元素是否超出视口最可靠，其 top、bottom、left、right 值均相对于视口左上角；top < 0 或 bottom > window.innerHeight 等即表示溢出，需结合 requestAnimationFrame 动态修正位置并监听 scroll/resize 重校准。
元素超出视口时如何用 getBoundingClientRect() 判断边界
直接读取元素在视口内的位置是最可靠的方式，getBoundingClientRect() 返回的 top、bottom、left、right 值都是相对于当前视口左上角的像素距离。只要任一值落在视口范围外（比如 top < 0 或 right > window.innerWidth），就说明它已溢出。
注意：该方法返回的是布局后的真实尺寸，不受 transform 影响（除非配合 will-change 或合成层），但会受滚动、缩放、iframe 嵌套影响。在 iframe 中调用需确保上下文正确。
-
top < 0→ 元素顶部高于视口顶部 -
bottom > window.innerHeight→ 元素底部低于视口底部 -
left < 0→ 元素左侧超出视口左边缘 -
right > window.innerWidth→ 元素右侧超出视口右边缘
用 overflow-anchor 和 contain 减少重排干扰
当频繁判断并调整定位元素（如 Tooltip、Dropdown）位置时，浏览器可能因样式重绘触发 layout thrashing。此时可对容器添加 contain: layout paint，或启用 overflow-anchor: none 来抑制滚动锚定行为——后者在 Chrome/Edge 中能避免因元素突然移入视口导致的意外跳动。
这两个属性不解决溢出本身，但能显著提升动态定位时的响应稳定性，尤其在移动端或低性能设备上效果明显。
立即学习“前端免费学习笔记（深入）”；
-
contain: layout paint可隔离子元素的布局和绘制，防止父级重排波及整个页面 -
overflow-anchor: none关闭滚动锚点，避免position: fixed元素进入视口时强制滚动偏移 - 二者都应加在定位容器（如
.tooltip-container）上，而非被定位的元素本身
动态修正 position: absolute 元素的 top/left 值
手动计算并设置 top 和 left 是最常用也最可控的方式。关键在于：修正逻辑必须在布局完成后执行（即不能在 offsetTop 尚未更新时就读取），推荐用 requestAnimationFrame 或 setTimeout(..., 0) 延迟到下一帧。
function adjustPosition(el) {
const rect = el.getBoundingClientRect();
const viewport = {
width: window.innerWidth,
height: window.innerHeight
};
let top = rect.top;
let left = rect.left;
<p>if (rect.top < 0) top = 0;
if (rect.bottom > viewport.height) top = viewport.height - rect.height;
if (rect.left < 0) left = 0;
if (rect.right > viewport.width) left = viewport.width - rect.width;</p><p>el.style.top = <code>${top}px</code>;
el.style.left = <code>${left}px</code>;
}</p><p>// 确保在 layout 后执行
requestAnimationFrame(() => adjustPosition(document.querySelector('.popup')));</p>用 max-height + overflow-y: auto 截断内容而非裁剪容器
单纯靠 overflow: hidden 会隐藏内容且无法滚动，用户看不到被截断的信息。更合理的做法是对内容区设限：给弹层内部的内容容器加 max-height 和 overflow-y: auto，让内容可滚动，同时保持外层定位框尺寸稳定。
这比用 clip-path 或 mask 更兼容（IE11 都支持），也不会影响焦点、键盘导航和屏幕阅读器。
- 不要对
position: absolute的根元素设overflow: hidden - 应在子容器（如
.popup__content）上设置max-height: 200px和overflow-y: auto - 若内容高度动态变化，需在更新后调用
adjustPosition()重新校准位置
实际中最容易被忽略的是：滚动容器内定位元素的 getBoundingClientRect() 值会随滚动实时变化，但很多脚本只在初始化时检查一次。必须监听 scroll、resize，甚至 orientationchange，并在必要时重新校准——尤其是嵌套在 position: relative 或 transform 父容器里的元素，其计算逻辑会更复杂。
