【前言】
本文简单介绍下document.body 与 document.documentElement区别
【主体】
（1）什么是document.body？
返回html dom中的body节点 即<body>
（2）什么是 document.documentElement？
返回html dom中的root 节点 即<html>
（3）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
（4）兼容解决方案：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
.
相关推荐
在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时，我们深入分析了浏览器在处理页面滚动位置时的不同行为，尤其是当滚动位置值始终为0时的...
3. **与window对象的scrollY区别**：虽然 `window.scrollY` 和 `document.body.scrollTop` 在很多情况下结果相同，但它们并不完全等价。`window.scrollY` 返回的是整个窗口（包括顶部固定元素）相对于浏览器顶部的...
- 在处理跨浏览器兼容性问题时，建议使用 `document.documentElement.scrollTop` 而不是 `document.body.scrollTop`。 - 使用 `window.scrollTo` 或 `window.scrollBy` 方法时，注意它们在不同浏览器中的兼容性差异...
在JavaScript的DOM操作中，document.documentElement 和 document.body 是两个非常重要的属性，它们分别代表了文档的不同部分。理解这两者之间的区别对于前端开发者来说至关重要，尤其是在进行页面布局和滚动操作时...
在标准模式下，则需要先判断document.documentElement.scrollLeft和document.documentElement.scrollTop是否为0，若是则使用document.body.scrollLeft和document.body.scrollTop。 了解了这些区别后，前端开发者在...
页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享...
在JavaScript中，`document.documentElement` 和 `document.documentElement.scrollTop` 是两个非常重要的属性，它们与网页文档的DOM（Document Object Model）交互，特别是涉及到页面滚动时的行为。本文将深入讲解...
在标准模式下，浏览器倾向于使用`document.documentElement.scrollTop`来获取页面的滚动位置，而不是`document.body.scrollTop`。 `document.documentElement` 指的是HTML文档的根元素，即`<html>`标签。在标准模式...
上次的测试说明了document.body属性并不会给我们返回预期的结果，比如我们用document.body.clientHeight原本想取得“页面可见区域高度”，可实际上返回的是“页面实际内容高度”。 那我们怎么办呢？难道加上了文档...
- 使用`document.write('<body></body>')`来清除页面上的所有内容，并重新插入一个空的`<body>`标签。 - 这一步是必要的，因为如果直接修改现有文档的内容而不进行清空操作，可能会导致布局错乱或意料之外的结果。...
- 在 Firefox 和 Opera 中，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`分别表示页面宽度减去`BODY`的外边距（`margin`）后的宽度和高度。 为了确保代码的兼容性，开发者在...
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
这个函数通过检查 `document.documentElement.scrollTop` 和 `document.body.scrollTop` 来确定滚动条的位置。在不同的浏览器中，这两个属性可能有不同的行为，因此需要进行条件判断来确保兼容性。 ```javascript ...
在Web开发中，理解和掌握`document.body`和`document.documentElement`的区别至关重要，尤其是在处理页面布局和兼容性问题时。这两个对象分别代表了HTML文档的不同部分：`document.body`指的是HTML文档的实际内容...
在标准模式下，IE和Firefox等现代浏览器倾向于遵循W3C标准，其中规定应该使用`document.documentElement.scrollTop`来获取整个页面的滚动位置，而不是`document.body.scrollTop`。因此，当你尝试通过`document.body....
但需要注意的是，对于IE5.5及更高版本，需要特别处理`document.body.scrollLeft`和`document.documentElement.scrollLeft`，以及`document.body.scrollTop`和`document.documentElement.scrollTop`，以确保在所有...
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例：...