它似乎<html>元素就像一个伪窗口元素或视图容器元素？

Question

如果任何网页有3000px高的内容，我都会期望

document.body.offsetHeight
document.documentElement.offsetHeight

都是3000px 。 请注意document.documentElement与<html>元素完全相同：

document.documentElement === document.querySelector("html")   // true

但是， document.documentElement.offsetHeight不是3000px 。 它只是800px或600px （在当前 StackOverflow 页面上测试过），它只取决于内容区域（或视口）的窗口大致有多高。

实际上，当网页向上滚动时， 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);

在当前 StackOverflow 网页中（使用 Google Chrome 的开发者控制台）。 但是，如果我创建一个很长的纯 HTML 文件，并在其<script>或开发人员的控制台中执行上述两行，我会得到类似的<body>和<html> 。 所以我很困惑为什么普通页面和 StackOverflow 的行为不同。 似乎<html>可以用作伪窗口，也可以不用作伪窗口。

但是在长长的纯 HTML 页面中，如果我这样做：

console.log(document.body.clientHeight);
console.log(document.documentElement.clientHeight);

我能够为<html>获得2400px和680px 。 所以看起来它仍然使用<html>作为伪窗口或视图容器。 但我认为clientHeight和offsetHeight非常接近，但只有滚动条大小包含在offsetHeight 。 我想知道为什么他们在这种情况下如此不同。

例子：

 console.log(document.body.clientHeight); console.log(document.documentElement.clientHeight);

 body { font-size: 36px; }

 <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At quis risus sed vulputate odio ut enim blandit. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Sit amet purus gravida quis blandit. Et ultrices neque ornare aenean euismod elementum. Varius duis at consectetur lorem donec massa sapien faucibus et. In iaculis nunc sed augue. Platea dictumst quisque sagittis purus sit amet. Tortor at risus viverra adipiscing at in tellus. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Rhoncus est pellentesque elit ullamcorper dignissim cras. Porttitor lacus luctus accumsan tortor posuere. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Sed nisi lacus sed viverra tellus. Et ligula ullamcorper malesuada proin libero. Velit scelerisque in dictum non consectetur a erat nam. Non tellus orci ac auctor augue mauris augue neque gravida. Proin libero nunc consequat interdum varius sit. Hac habitasse platea dictumst quisque sagittis purus sit amet. Dolor morbi non arcu risus. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Tincidunt praesent semper feugiat nibh sed pulvinar. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Sit amet nisl suscipit adipiscing. Amet nulla facilisi morbi tempus iaculis. Suspendisse sed nisi lacus sed viverra. Nullam ac tortor vitae purus. Risus quis varius quam quisque id diam vel quam. Enim ut sem viverra aliquet eget. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Dictum varius duis at consectetur lorem donec massa. Eu feugiat pretium nibh ipsum consequat nisl vel. Amet risus nullam eget felis eget nunc lobortis. Egestas purus viverra accumsan in nisl. Dignissim diam quis enim lobortis. Eget duis at tellus at urna condimentum mattis pellentesque. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Velit ut tortor pretium viverra suspendisse. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Id faucibus nisl tincidunt eget nullam non nisi est. Ut venenatis tellus in metus vulputate. Lectus proin nibh nisl condimentum. Bibendum at varius vel pharetra vel. Quam vulputate dignissim suspendisse in. Ut etiam sit amet nisl purus in mollis nunc. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Ac ut consequat semper viverra nam libero justo. Lacus vel facilisis volutpat est velit egestas. Amet aliquam id diam maecenas ultricies. Enim tortor at auctor urna. Magna etiam tempor orci eu. Sollicitudin tempor id eu nisl nunc mi ipsum. Etiam tempor orci eu lobortis elementum nibh tellus. Velit ut tortor pretium viverra suspendisse potenti nullam ac tortor. Nulla facilisi cras fermentum odio eu feugiat pretium nibh. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Proin libero nunc consequat interdum varius sit amet mattis. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Risus nullam eget felis eget nunc lobortis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. In nulla posuere sollicitudin aliquam. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Sit amet justo donec enim diam vulputate. Ut faucibus pulvinar elementum integer. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. A condimentum vitae sapien pellentesque habitant morbi tristique. Vel fringilla est ullamcorper eget nulla facilisi. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque. Ultricies integer quis auctor elit sed vulputate mi. Euismod quis viverra nibh cras pulvinar mattis. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Mi tempus imperdiet nulla malesuada pellentesque elit eget. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Nam libero justo laoreet sit amet. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Facilisi etiam dignissim diam quis enim. Augue lacus viverra vitae congue eu. Velit scelerisque in dictum non consectetur a erat nam. Amet purus gravida quis blandit turpis cursus in. Tortor pretium viverra suspendisse potenti nullam ac. Dolor sit amet consectetur adipiscing elit ut. Proin sed libero enim sed faucibus turpis in eu. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Ut pharetra sit amet aliquam id diam maecenas ultricies mi. At in tellus integer feugiat. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Dui nunc mattis enim ut tellus. Elit duis tristique sollicitudin nibh. Ac odio tempor orci dapibus ultrices in. Netus et malesuada fames ac turpis egestas sed. Quam lacus suspendisse faucibus interdum posuere lorem ipsum. A lacus vestibulum sed arcu non odio euismod lacinia. </div>

我们还需要注意的一件事是，如 JavaScript Definitive Guide 6th Ed p.395 和 p.903 中所述，并且在规范中，如果clientWidth和clientHeight在<html>元素上，它的行为会有所不同，这是为了给视口的宽度和高度不包括任何滚动条。 因此，在研究页面时，需要牢记这一点。

同样，在<html>上的scrollTop上甚至有这样的例外。 在这种情况下，它是 window 的 scrollY。 .

我认为到目前为止的一个结论是，似乎<html>以某种方式被视为伪窗口或以编程方式查看区域，就像在规范中指定其属性一样。

Answer 1

首先，如果在 Stack Overflow 的页面中，您将.offsetHeight和getComputedStyle()['height']设为视口的大小，那是因为有一条规则说明html { height: 100%; } html { height: 100%; } .

如果没有此规则，您将拥有与正文相同的大小：

 console.log( "height:auto" ); console.log( "offsetHeight", document.documentElement.offsetHeight ); document.documentElement.classList.add( "SO" ); console.log( "height:100%" ); console.log( "offsetHeight", document.documentElement.offsetHeight );

 body { height: 1000vh; } html.SO { height: 100%; }

现在对于滚动相关的值， document.documentElement元素实际上是普通网页中的document.scrollingElement ：

 console.log( document.scrollingElement === document.documentElement );

它是 quirks 模式下的document.body 。

鉴于这种特殊的地位，scrollingElement的滚动相关的值实际上会返回根节点的那些，它有包含块的尺寸设置为视口的尺寸在正常网页。

它似乎<html>元素就像一个伪窗口元素或视图容器元素？

问题描述

1 个解决方案

解决方案1
2 2020-01-09 08:22:55

它似乎<html>元素就像一个伪窗口元素或视图容器元素？

问题描述

1 个解决方案

解决方案1 2 2020-01-09 08:22:55

解决方案1
2 2020-01-09 08:22:55