JavaScript正确获取当前页面滚动位置的实现方法

window.pageYOffset || document.documentElement.scrollTop返回固定0，无外乎两种情况：

1. 兼容逻辑缺失：浏览器怪异渲染模式下，页面滚动值挂载在document.body节点上，原有判断逻辑未覆盖该节点
2. 滚动主体判断错误：页面实际产生滚动条的元素不是根节点（html/body），而是业务代码中设置了overflow: auto/scroll的内部容器，此时根节点scrollTop本身恒为0，读取根节点自然拿不到正确值。

全局页面滚动位置兼容写法 #

覆盖所有主流浏览器+IE怪异模式的全局滚动值获取方法：

const getPageScrollTop = () => {
  // 现代浏览器优先取标准API
  if (typeof window.pageYOffset === 'number') return window.pageYOffset
  // 兼容标准模式/怪异模式下的DOM节点取值
  const domNode = document.documentElement || document.body.parentNode || document.body
  return domNode.scrollTop
}

注：window.pageYOffset和window.scrollY效果完全一致，前者兼容性覆盖更广。

自定义滚动容器场景处理 #

如果用上面的方法依然返回0，说明滚动条挂载在内部容器上，按下面步骤排查即可：

• 先把页面滚到非顶部位置，在控制台执行下面的代码，就能直接定位到实际产生滚动的元素

document.querySelectorAll('*').forEach(el => {
  if (el.scrollTop > 0) console.log('实际滚动元素：', el)
})

• 定位到对应元素后，直接读取该元素的scrollTop属性，就能拿到准确的滚动位置；如果是Vue/React项目用了UI库的内置滚动组件（比如自定义滚动条、布局容器），直接用组件官方暴露的滚动位置API即可，不用手动读DOM。

• 不要给html、body标签设置height: 100% + overflow: hidden样式，这会直接禁用根节点滚动，导致根节点滚动值恒为0
• 注意读取时机：如果在页面初始渲染未完成、滚动动画未执行阶段就读取值，拿到0是正常现象，可以把读取逻辑绑定到scroll事件回调里，或者用requestAnimationFrame等页面渲染完成后再读取
• 移动端Safari浏览器如果存在底部工具栏弹性滚动效果，window.pageYOffset可能出现短暂负值，做边界判断的时候记得兼容这个场景。

内容的提问来源于stack exchange，提问作者user19251203