document.scrollingElement.scrollHeight和document.body.scrollHeight有什么区别？

document.scrollingElement.scrollHeight 和 document.body.scrollHeight 都是用于获取页面滚动高度的属性，但它们之间存在一些区别：

document.scrollingElement:
- document.scrollingElement 是一个指向当前文档中实际滚动的元素的引用。在大多数现代浏览器中，这个元素通常是 document.documentElement（即 <html> 元素），但在某些情况下（例如在 body 元素设置了 overflow 属性时），它可能是 document.body。

scrollHeight:
- scrollHeight 是一个只读属性，表示元素内容的总高度（包括溢出部分），以像素为单位。如果元素的内容可以垂直滚动，那么 scrollHeight 将大于元素的可见高度（clientHeight）。

引用对象不同:
- document.scrollingElement.scrollHeight 引用的是当前实际滚动的元素的 scrollHeight。
- document.body.scrollHeight 引用的是 <body> 元素的 scrollHeight。

兼容性:
- document.scrollingElement 是一个相对较新的属性，主要在现代浏览器中得到支持（如 Chrome、Firefox、Edge 等）。
- document.body.scrollHeight 是一个较早的属性，在所有主流浏览器中都有很好的支持。

document.scrollingElement.scrollHeight:
- 优势: 更准确地反映了当前实际滚动的元素的高度，不受 body 元素的 overflow 属性影响。
- 应用场景: 当你需要获取整个文档的滚动高度，并且希望代码在现代浏览器中具有更好的兼容性时，使用 document.scrollingElement.scrollHeight 是更好的选择。
document.body.scrollHeight:
- 优势: 在所有主流浏览器中都有很好的支持，兼容性更好。
- 应用场景: 当你需要获取 <body> 元素的滚动高度，并且对浏览器的兼容性有较高要求时，使用 document.body.scrollHeight 是更安全的选择。

// 获取当前实际滚动的元素的滚动高度
console.log(document.scrollingElement.scrollHeight);

// 获取 <body> 元素的滚动高度
console.log(document.body.scrollHeight);

通过以上解释，你应该能够清楚地了解 document.scrollingElement.scrollHeight 和 document.body.scrollHeight 之间的区别及其应用场景。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云