Element.scrollTop, scrollHeight, clientHeight

q6hillz·2022년 4월 16일
0

javascript

목록 보기
9/60
post-custom-banner

Element.scrollTop

The Element.scrollTop property gets or sets the number of pixels that an element's content is scrolled vertically.
css의 overflow: scroll; 된다면 챙길 수 있는 값으로,

  • If the element can't be scrolled (e.g. it has no overflow or if the element has a property of "non-scrollable"), scrollTop is 0.
  • scrollTop doesn't respond to negative values; instead, it sets itself back to 0.
  • If set to a value greater than the maximum available for the element, scrollTop settles itself to the maximum value.

Scroll이 없을 경우 항상 0을 반환
elem.scrollTop 값에 음수 값을 입력하게된다면 자동으로 0으로 치환된다.
elem.scrollTop 값이 Maximum을 넘은 값을 입력하게 된다면, 자동적으로 최대값으로 치환된다.

Element.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 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).

scroll로 가져진 부분까지 포함하여 height를 반환한다.(궁극적으로 바닥까지 내리게 되면 clientHeight만 남게되는 현상.)

Element.clientHeight

The 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. It includes padding but excludes borders, margins, and horizontal scrollbars (if present).

element의 content높이를 반환하는 메소드.

post-custom-banner

0개의 댓글