document.scrollingElement.scrollHeight
和 document.body.scrollHeight
都是用于获取页面滚动高度的属性,但它们之间存在一些区别:
document.scrollingElement
是一个指向当前文档中实际滚动的元素的引用。在大多数现代浏览器中,这个元素通常是 document.documentElement
(即 <html>
元素),但在某些情况下(例如在 body
元素设置了 overflow
属性时),它可能是 document.body
。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元无门槛券
手把手带您无忧上云