深入: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().

这里写图片描述

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