document.body.scrollTop的值为什么总为0

3,150 阅读1分钟

用 React Hooks 实现返回顶部按钮 ?一文中,使用了 window.document.body.scrollTop 来获取当前页面的滚动距离,但是在某些浏览器或某个版本的Chrome浏览其中,获取到的值却一直是0,这是什么原因呢?

在解释原因之前,我们先来了解什么是 DTD。

文档类型定义

DTD,即文档类型定义,在 HTML 中,文档类型 都穿type 的声明是必要的。在所有文档的头部,通常都会有 声明,这个声明是为了防止浏览器在渲染文档是,切换到 "怪异模式(兼容模式)" 的渲染方式。

document.body.scrollTop为0的原因

标准模式下,即文档头部有 doctype 声明,浏览器滚动条是属于 html 元素的,只能通过 document.documentElement.scrollTop 获取滚动距离。

怪异模式下,即文档头部没有 doctype 声明,浏览器滚动条数属于 body,因此通过 document.body.scrollTop 获取滚动距离。

各浏览器下 scrollTop 的差异

  • IE

对于没有doctype声明的页面,使用 document.body.scrollTop 或 document.documentElement.scrollTop;

对于有doctype声明的页面,则使用 document.documentElement.scrollTop;

  • Chrome、Firefox

对于没有doctype声明的页面,使用 document.body.scrollTop 来获取 scrollTop高度 ;

对于有doctype声明的页面,则使用 document.documentElement.scrollTop;

  • Safari:

safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;

解决方法

为了兼容所有浏览器,我们应该封装一个函数,取获取页面的滚动距离。

const getScroll = () => {
	return {
  	top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop  || 0,
    left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0
  }
}