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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理