共计 1167 个字符,预计需要花费 3 分钟才能阅读完成。
1. 对于 clientHeight,scrollHeight,offsetHeight
- clientHeight
官网解释:It includes padding but excludes borders, margins, and horizontal scrollbars (if present).
即 clientHeight 为内容高度加 padding 高度,最初减去程度的滚动条高度(如果存在)
- offsetHeight
官网解释:The HTMLElement.offsetHeight
read-only property returns the height of an element, including vertical padding and borders, as an integer.
即 offsetHeight 就是内容高度加 padding 高度,加上 border 高度
- scrollHeight
官网解释:The Element.scrollHeight
read-only property 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 height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight
: it includes the element’s padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before
or ::after
. If the element’s content can fit without a need for vertical scrollbar, its scrollHeight
is equal to clientHeight
2.scrollTop
官网解释:An element’s scrollTop
value is a measurement of the distance from the element’s top to its topmost visible content. When an element’s content does not generate a vertical scrollbar, then its scrollTop
value is 0
.
即 scroolTop 就是元素内容在竖直方向上滚动的像素数