一文搞懂 JavaScript 中的 `pageXOffset`、`scrollX`、`pageYOffset` 和 `scrollY`

一文搞懂 JavaScript 中的 pageXOffset、scrollX、pageYOffset 和 scrollY

在前端开发中，页面滚动是一个非常常见的交互场景。无论是实现“回到顶部”按钮、固定导航栏，还是动态加载内容，开发者都需要精确控制或获取页面的滚动位置。而 JavaScript 中的 pageXOffset、scrollX、pageYOffset 和 scrollY 四个属性，正是实现这些功能的关键工具。

本文将深入浅出地讲解这四个属性的用法、区别以及实际应用场景，帮助你快速掌握它们的精髓。

---

一、基本概念

1. pageXOffset 和 scrollX

• 作用：获取页面水平滚动的距离（单位为像素）。
• 访问方式：window.pageXOffset 或 window.scrollX。
• 特点：
  • 这两个属性实际上是等价的，scrollX 是 pageXOffset 的别名。
  • 它们返回的是页面相对于窗口左上角的水平滚动距离。
  • 如果页面没有水平滚动，值为 0。

2. pageYOffset 和 scrollY

• 作用：获取页面垂直滚动的距离（单位为像素）。
• 访问方式：window.pageYOffset 或 window.scrollY。
• 特点：
  • 同样是等价的，scrollY 是 pageYOffset 的别名。
  • 返回的是页面相对于窗口顶部的垂直滚动距离。
  • 如果页面没有垂直滚动，值为 0。

3. 浏览器兼容性

• 现代浏览器（Chrome、Firefox、Safari、Edge 等）：直接支持 pageXOffset 和 pageYOffset。
• IE 8 及更早版本：不支持这两个属性，需使用 document.body.scrollLeft 和 document.body.scrollTop 作为替代方案。
• IE 9+：支持 pageXOffset 和 pageYOffset，但不支持 scrollX 和 scrollY。

---

二、核心区别与联系

属性	作用	兼容性	是否可写
pageXOffset	获取水平滚动距离	所有现代浏览器	否
scrollX	pageXOffset 的别名	所有现代浏览器	否
pageYOffset	获取垂直滚动距离	所有现代浏览器	否
scrollY	pageYOffset 的别名	所有现代浏览器	否

关键点：

1. 只读属性：这四个属性都是只读的，不能直接修改它们的值。如果需要设置滚动位置，应使用 window.scrollTo() 或 window.scrollBy() 方法。
2. 等价关系：
   • window.pageXOffset === window.scrollX
   • window.pageYOffset === window.scrollY
3. 兼容性处理：

   const scrollX = window.pageXOffset || document.body.scrollLeft;
   const scrollY = window.pageYOffset || document.body.scrollTop;
   

---

三、实际应用场景

1. 获取当前滚动位置

// 获取水平和垂直滚动距离
const horizontalScroll = window.pageXOffset || window.scrollX;
const verticalScroll = window.pageYOffset || window.scrollY;

console.log(`水平滚动: ${horizontalScroll}px, 垂直滚动: ${verticalScroll}px`);

2. 滚动事件监听

通过监听 scroll 事件，实时获取滚动位置：

window.addEventListener('scroll', () => {
  console.log(`页面正在滚动 - 水平: ${window.scrollX}, 垂直: ${window.scrollY}`);
});

3. 实现“回到顶部”按钮

当用户滚动到一定距离时显示“回到顶部”按钮，并点击时平滑滚动到顶部：

const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
  if (window.scrollY > 200) {
    backToTopButton.style.display = 'block';
  } else {
    backToTopButton.style.display = 'none';
  }
});

backToTopButton.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  });
});

4. 固定导航栏

当用户滚动到一定位置时，固定导航栏在页面顶部：

window.addEventListener('scroll', () => {
  const header = document.querySelector('header');
  if (window.scrollY > 100) {
    header.classList.add('fixed');
  } else {
    header.classList.remove('fixed');
  }
});

5. 动态调整元素样式

根据滚动位置动态修改元素的样式，例如调整 margin-left：

const div = document.getElementById('myDiv');

window.addEventListener('scroll', () => {
  const scrollX = window.scrollX || window.pageXOffset;
  const scrollY = window.scrollY || window.pageYOffset;
  const newMarginLeft = scrollX + scrollY;
  div.style.marginLeft = `${newMarginLeft}px`;
});

---

四、进阶技巧

1. 设置滚动位置

虽然 pageXOffset 和 pageYOffset 是只读的，但可以通过 window.scrollTo() 或 window.scrollBy() 方法设置滚动位置：

// 滚动到指定位置
window.scrollTo(100, 500); // 水平滚动100px，垂直滚动500px

// 相对于当前位置滚动
window.scrollBy(0, 100); // 向下滚动100px

// 使用对象参数（推荐）
window.scrollTo({
  left: 200,
  top: 300,
  behavior: 'smooth' // 平滑滚动
});

2. 结合 getBoundingClientRect()

通过 getBoundingClientRect() 获取元素相对于视口的位置，结合滚动位置判断元素是否进入可视区域：

const section = document.querySelector('.section');
const rect = section.getBoundingClientRect();

if (rect.top <= window.innerHeight) {
  section.classList.add('active'); // 触发动画
}

---

五、总结

• pageXOffset 和 scrollX：水平滚动距离，等价，现代浏览器直接支持。
• pageYOffset 和 scrollY：垂直滚动距离，等价，现代浏览器直接支持。
• 兼容性处理：对于旧版 IE 浏览器，需使用 document.body.scrollLeft 和 document.body.scrollTop。
• 实际应用：广泛用于滚动事件监听、动态布局调整、动画触发等场景。

掌握这四个属性，不仅能帮助你更好地控制页面滚动行为，还能提升用户体验。在实际开发中，建议优先使用 pageXOffset 和 pageYOffset，并结合 scrollTo() 和 scrollBy() 实现更复杂的交互逻辑。