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

image

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


chengjufei
15 声望0 粉丝