document.body 与 document.documentElement区别介绍

最新推荐文章于 2021-08-11 17:43:57 发布

转载最新推荐文章于 2021-08-11 17:43:57 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/mrdooo/p/6633688.html

js 同时被 2 个专栏收录

122 篇文章

订阅专栏

html

23 篇文章

订阅专栏

本文详细解析了在不同浏览器环境下，如Chrome、Firefox和IE，document.body与document.documentElement在获取滚动条距离（scrollTop）上的差异。并提供了一个兼容性解决方案，确保在有无DTD的情况下都能正确获取滚动距离。

什么是document.body？

返回html dom中的body节点 即<body>

什么是 document.documentElement？

返回html dom中的root 节点 即<html>

document.documentElement 与 document.body的应用场景

获取 scrollTop 方面的差异

复制代码

在chrome(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DTD是否存在,不会影响 document.body.scrollTop的获取。

通过console查看结果：

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

复制代码

在firefox(47.0)及 IE(11.3)下获取scrollTop，DTD是否存,会影响document.body.scrollTop 与 document.documentElement.scrollTop的取值

复制代码

在firefox(47.0)

页面存在DTD，使用document.documentElement.scrollTop获取滚动条距离；

页面不存在，使用document.body.scrollTop 获取滚动条距离

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

复制代码

IE(11.3)

复制代码

页面存在DTD，使用document.documentEelement.scrollTop获取滚动条距离

页面不存在DTD,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以获取到滚动条距离

demo 1 with doctype : http://jsbin.com/cisacam 

demo 2 without doctype: http://jsbin.com/kamexad/16

复制代码

兼容解决方案：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;