前端JavaScript 项目中 获取当前页面滚动位置

在前端 JavaScript 项目中，获取当前页面滚动位置 是一个非常常见的需求（如：懒加载、吸顶、返回顶部、埋点统计等）。下面按推荐程度 + 兼容性做一个清晰总结 👇

---

✅ 一、最推荐（现代浏览器）

const scrollTop = window.scrollY;
const scrollLeft = window.scrollX;

• scrollY：页面垂直滚动距离

• scrollX：页面水平滚动距离

📌 优点

• 语义清晰

• 所有现代浏览器都支持

• 优先使用

---

✅ 二、兼容写法（处理不同浏览器）

const scrollTop =
  window.pageYOffset ||
  document.documentElement.scrollTop ||
  document.body.scrollTop ||
  0;

📌 说明

• pageYOffset ≈ scrollY

• 主要用于兼容极老浏览器（IE）

---

⚠️ 三、不要单独用的写法

document.body.scrollTop
document.documentElement.scrollTop

原因：

• 取决于浏览器和文档模式

• 有时为 0

• 单独用不可靠

---

✅ 四、监听滚动事件获取实时位置

window.addEventListener('scroll', () => {
  const scrollTop = window.scrollY;
  console.log(scrollTop);
});

⚠️ 注意：scroll 事件触发非常频繁

---

🚀 五、推荐：节流（Throttle）处理

let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      console.log(window.scrollY);
      ticking = false;
    });
    ticking = true;
  }
});

✔ 性能友好

✔ 适合动画、吸顶、监听滚动进度

---

📦 六、获取某个元素的滚动位置

const el = document.querySelector('.container');

console.log(el.scrollTop);   // 垂直滚动
console.log(el.scrollLeft);  // 水平滚动

适用于：

• 自定义滚动容器

• 弹窗

• 表格、列表容器

---

🧠 七、判断页面滚动到底部

const isBottom =
  window.innerHeight + window.scrollY >= document.body.offsetHeight;

if (isBottom) {
  console.log('滚动到底部了');
}

---

✅ 八、总结（直接记住）

场景	推荐写法
当前页面滚动位置	window.scrollY
兼容老浏览器	`window.pageYOffset
元素滚动	element.scrollTop
实时监听	scroll + requestAnimationFrame