[如果任何网页具有3000px高的内容，我都希望两个
document.body.offsetHeight
document.documentElement.offsetHeight
都是3000px。请注意，document.documentElement与<html>元素完全相同：
document.documentElement === document.querySelector("html") // true
但是，document.documentElement.offsetHeight不是3000px。它只是800px或600px，仅取决于内容区域（或视口）的窗口的高度。
实际上，document.documentElement.scrollTop在向上滚动网页时改变。 document.body.scrollTop始终保持0。
[这与div×200px的容器200px，overflow设置为auto或scroll，然后在容器内的内容div时完全相同。 div为2000px×2000px。在这种情况下，容器div的clientHeight或offsetHeight小（大约为200px），并且当内容上下滚动时，scrollTop会发生变化。
这是最初设计的样子吗？也许多年以来，我一直认为<html>和<body>元素几乎相同：向用户显示的内容相同（<head>未显示），并且它们的高度和宽度相同，这是一个误解吗？感觉设计原理是<html>就像视图容器或伪窗口。
甚至CSS都参与了此：
getComputedStyle(document.documentElement)["height"] // 600px or small number
getComputedStyle(document.body)["height"] // 3000px
但是也许一个奇怪的行为是，如果添加滚动事件侦听器，则必须将其添加到document或window而不是document.documentElement：
document.documentElement.addEventListener("scroll", ... // won't work
并且上述200px×200px容器的情况则不同。事件处理程序将添加到此200px×200px容器中。
涉及document.documentElement.scrollTop和document.documentElement.scrollHeight的示例（当所有内容向上滚动时，背景变为黄色）：
document.addEventListener("scroll", ev => {
// console.log(ev);
document.body.style.background = document.documentElement.scrollTop + document.documentElement.clientHeight === document.documentElement.scrollHeight ? "yellow" : "white";
})<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Vel risus commodo viverra maecenas accumsan lacus vel. Magnis dis parturient montes nascetur. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Nullam non nisi est sit amet facilisis magna etiam. Porttitor leo a diam sollicitudin tempor id eu. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Phasellus egestas tellus rutrum tellus pellentesque. Arcu odio ut sem nulla pharetra diam. Felis imperdiet proin fermentum leo vel orci. Id donec ultrices tincidunt arcu non. Egestas pretium aenean pharetra magna ac placerat. Amet risus nullam eget felis.
Laoreet id donec ultrices tincidunt arcu non sodales neque. Dolor magna eget est lorem ipsum dolor. Interdum consectetur libero id faucibus nisl. Amet purus gravida quis blandit turpis cursus in hac habitasse. Ultrices gravida dictum fusce ut placerat. Tortor consequat id porta nibh venenatis cras sed felis. Sagittis eu volutpat odio facilisis mauris sit. Massa placerat duis ultricies lacus sed turpis tincidunt id aliquet. Vel quam elementum pulvinar etiam non quam lacus. Blandit turpis cursus in hac habitasse platea dictumst.
Amet justo donec enim diam vulputate. Cursus mattis molestie a iaculis at. Massa massa ultricies mi quis hendrerit dolor. Est ultricies integer quis auctor elit. Id venenatis a condimentum vitae. Amet mauris commodo quis imperdiet. Pretium viverra suspendisse potenti nullam ac. Ultrices dui sapien eget mi. Mattis molestie a iaculis at erat pellentesque adipiscing. Commodo quis imperdiet massa tincidunt. Arcu non sodales neque sodales. Nibh tortor id aliquet lectus proin. Nam at lectus urna duis convallis convallis. Faucibus nisl tincidunt eget nullam non nisi.
</div>console.log(document.body.offsetHeight);
console.log(document.documentElement.offsetHeight);如果html与其内容一样高，则无法滚动。
console.log( document.scrollingElement === document.documentElement );并且请注意，曾经是<body>是文档的scrollingElement，因此具有您描述的所有属性。