深入:Window的對象Scroll

Window.innerHeight Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
窗口中文檔顯示區域的高度,不包括菜單欄、工具欄等部分

tips: IE不支持該屬性,IE中body元素的clientHeight屬性與該屬性相同。

Window.scrollY Returns the number of pixels that the document has already been scrolled vertically.
返回文檔在垂直方向已滾動的像素值。

tips: pageYOffset 屬性是 scrollY 屬性的別名,爲了跨瀏覽器兼容,用 window.pageYOffset 代替
window.scrollY。

HTMLElement.offsetHeight (read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.
一個只讀屬性,它返回該元素的像素高度,高度包含該元素的垂直內邊距和邊框,且是一個整數。
這個屬性值會被四捨五入爲整數值,如果你需要一個浮點數值,請用 element.getBoundingClientRect().

Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it’s the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
返回元素內部的高度(單位像素),包含內邊距,但不包括水平滾動條、邊框和外邊距。

tips: 這個屬性值會被四捨五入爲整數值,如果你需要一個浮點數值,請用 element.getBoundingClientRect().

Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward. An element’s scrollTop is a measurement of the distance of an element’s top to its topmost visible content.
可以設置或者獲取一個元素距離他容器頂部的像素距離。一個元素的 scrollTop 是可以去計算出這個元素距離它容器頂部的可見高度。當一個元素的容器沒有產生垂直方向的滾動條,那它的 scrollTop 的值默認爲0.

tips:這個屬性值會被四捨五入爲整數值,如果你需要一個浮點數值,請用 element.getBoundingClient

Rect().

Element.scrollHeight read-only attribute is a measurement of the height of an element’s content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.
計量元素內容高度的只讀屬性,包括overflow樣式屬性導致的視圖中不可見內容。沒有垂直滾動條的情況下,scrollHeight值與元素視圖填充所有內容所需要的最小值clientHeight相同。包括元素的padding,但不包括元素的margin.

tips: 屬性將會對值四捨五入取整。如果需要小數值,使用Element.getBoundingClientRect().

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章