視口的寬高與滾動高度_html/css

整個窗口大小

innerHeight與outerHeight

通過 window.innerHeight 和 window.outerHeight 可以得到整個窗口的高度。其中：

把 Height 改為 Width 同樣有效，分別是 innerWidth 和 outerWidth 。

注意：IE8及以下不支持本節(jié)介紹的 window.innerHeight 等屬性。

clientHeight

在不支持 window.innerHeight 的瀏覽器中，可以讀取 documentElement 和 body 的高度， 它們的大小和 window.innerHeight 是一樣的（其實不太一樣，見下一小節(jié)）。

document.documentElement.clientHeightdocument.body.clientHeight

其中 documentElement 是文檔根元素，就是 標簽。

The Document.documentElement read-only property returns the Element that is the root element of the document (for example, the element for HTML documents). – MDN

body 顧名思義就是 標簽了。這兩種方式兼容性較好，可以一直兼容到IE6，就是寫起來費勁。

最佳實踐

既然獲取窗口大小存在瀏覽器兼容問題，在實踐中通常使用下面的代碼來兼容所有瀏覽器：

var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

事實上后兩種方式獲取的高度和 window.innerHeight 是不一樣的，這3個屬性的值逐個變小。 具體說來， window.innerHeight 包括整個DOM：內容、邊框以及滾動條。

其實使用 offsetHeight 作為Fallback要比 clientHeight 更好，更多的討論請見下文。

滾動高度

在使用JavaScript控制頁面滾動時（例如回到頂部），需要知道頁面當前滾動到了哪里，以及滾動到的目標是哪里。 這便是滾動高度。這涉及到4個DOM屬性， clientHeight , offsetHeight , scrollHeight , scrollTop 。

所有DOM元素都有上述4各屬性，只需要給它固定大小并設置 overflow:scroll 即可表現(xiàn)出來。

如下圖：

對應的橫向屬性為： clientWidth , offsetWidth , scrollWidth , scrollLeft 。

參考閱讀

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com