document 滚动兼容

兼容性问题

在不同浏览器中，获取文档滚动位置的方法存在差异。需要统一处理以确保兼容性。

// 获取垂直滚动位置（兼容所有浏览器）
function getScrollTop() {
  return window.pageYOffset ||
         document.documentElement.scrollTop ||
         document.body.scrollTop ||
         0;
}

// 设置滚动位置
function setScrollTop(value) {
  window.pageYOffset = value;
  document.documentElement.scrollTop = value;
  document.body.scrollTop = value;
}

示例 1：对比不同属性

观察不同浏览器属性值的差异

示例 2：封装的工具函数

使用统一的 API 处理滚动

// 推荐的工具函数
const ScrollUtils = {
  getScrollTop() {
    return window.pageYOffset || document.documentElement.scrollTop;
  },

  setScrollTop(value) {
    const y = this.getScrollTop();
    window.scrollTo({
      top: value,
      behavior: 'smooth'
    });
  }
};

示例 3：平滑滚动到指定位置

兼容的平滑滚动实现

function smoothScrollToElement(element) {
  const rect = element.getBoundingClientRect();
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const targetY = rect.top + scrollTop;

  window.scrollTo({
    top: targetY,
    behavior: 'smooth'
  });
}

总结

• 使用 pageYOffset 而不是 scrollY（更好的兼容性）
• 同时设置 documentElement 和 body 的 scrollTop
• 推荐使用 window.scrollTo() 实现平滑滚动
• 封装工具函数简化跨浏览器处理