乐趣区

关于前端:关于clientHeightscrollHeightoffsetHeight

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 就是元素内容在竖直方向上滚动的像素数

退出移动版