应优先使用IntersectionObserver监听元素可见性，仅需获取精确像素坐标时才结合防抖/节流与getBoundingClientRect()；防抖适用于滚动停稳后计算（如懒加载），节流适用于持续滚动中限频计算（如视差滚动）。
在窗口滚动时动态计算元素位置，防抖和节流本身不直接计算位置，而是用来控制 getBoundingClientRect() 或 offsetTop 等位置获取操作的执行频率，避免因高频触发 scroll 事件导致性能问题。关键在于：**先合理监听滚动，再用防抖/节流包裹位置计算逻辑，最后结合 DOM 查询准确读取目标元素坐标**。
用防抖控制“最后一次滚动停稳后”再计算
适合需要精确知道元素是否进入视口（如懒加载、动画触发动画）的场景。滚动过程中不计算，等用户停止滚动约 100–250ms 后再统一执行一次。
示例写法：
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const targetEl = document.querySelector('#my-section');
const updatePosition = () => {
const rect = targetEl.getBoundingClientRect();
console.log('top:', rect.top, 'visible?', rect.top < window.innerHeight);
};
const debouncedUpdate = debounce(updatePosition, 150);
window.addEventListener('scroll', debouncedUpdate);
用节流控制“固定间隔内最多执行一次”位置计算
适合需持续响应滚动位置（如吸顶导航、滚动进度条），但又不想每像素都计算。每 100–200ms 最多更新一次，兼顾实时性与性能。
立即学习“Java免费学习笔记（深入）”；
示例写法：
function throttle(fn, limit) {
let inThrottle;
return function () {
if (!inThrottle) {
fn.apply(this, arguments);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
const throttledUpdate = throttle(updatePosition, 160); // ≈60fps
window.addEventListener('scroll', throttledUpdate);
计算位置时注意坐标基准与边界判断
仅靠 scrollY + offsetTop 容易出错（受父容器 transform、position、margin-collapse 影响）。推荐优先使用 getBoundingClientRect()：
-
rect.top是元素上边距相对于视口顶部的距离（可为负值，表示已滚过） -
rect.bottom < 0→ 元素完全在视口上方；rect.top > innerHeight→ 完全在下方 - 判断“进入视口”常用：
rect.top < window.innerHeight && rect.bottom > 0 - 若需绝对文档坐标，可用
rect.top + window.scrollY
进阶：结合 Intersection Observer 更轻量（推荐）
现代方案中，对“元素是否可见/进入区域”的监听，应优先用 IntersectionObserver，它原生支持节流、脱离文档自动卸载、支持根容器和阈值配置，且不依赖 scroll 事件：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('进入视口', entry.target);
}
});
},
{ threshold: 0.1 } // 10% 可见时触发
);
observer.observe(document.querySelector('#my-section'));
无需手动防抖节流，浏览器底层已优化。仅当需获取精确像素坐标（如做视差滚动）时，才配合防抖/节流 + getBoundingClientRect() 使用。
