Chrome中document.querySelector("html").scrollTop返回0如何获取滚动位置

Chrome中直接执行document.querySelector("html").scrollTop恒返回0，是浏览器滚动容器挂载差异导致的：部分渲染模式下Chrome会将页面全局滚动挂载在<body>元素而非<html>元素上，此时直接读取html元素的滚动属性自然拿不到有效值。

准确获取当前页面滚动高度的方法 #

• 优先使用标准接口window.scrollY：该属性直接返回视口垂直方向滚动的像素值，全量支持现代浏览器，不需要判断滚动容器，取值稳定无兼容问题。
  调用示例：

  // 获取当前垂直滚动位置
  const scrollPosition = window.scrollY;
  

• 兼容低版本浏览器的兜底写法：同时读取html、body两个元素的scrollTop值，取非0值即为真实滚动高度，其中document.documentElement是html元素的原生引用，比querySelector选择器取值更稳定。
  代码示例：

  const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
  

方向键触发滚动的实现注意点 #

绑定键盘事件监听上下方向键时，记得先调用e.preventDefault()阻止浏览器默认的方向键滚动行为，避免自定义滚动逻辑和原生行为冲突，参考实现：

const scrollStep = 50; // 单次滚动步长，可按需调整
document.addEventListener('keydown', (e) => {
  const currentTop = window.scrollY;
  switch(e.key) {
    case 'ArrowUp':
      e.preventDefault();
      // 向上滚动时做边界判断，避免滚动到负坐标
      window.scrollTo(0, Math.max(0, currentTop - scrollStep));
      break;
    case 'ArrowDown':
      e.preventDefault();
      window.scrollTo(0, currentTop + scrollStep);
      break;
  }
})

避坑提示：不要依赖第三方库封装的html元素滚动取值方法，这类封装在新版Chrome下大概率出现取值为0的异常，优先调用window对象上的原生滚动相关接口。

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