它似乎<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