CSS調整

2017年8月20日

スクロールの値

scrollTop、clientHeight、scrollHeight・・・よくゴッチャになる


毎回使うたびに忘れてるのでメモ

scrollTop
要素内のスクロール量
clientHeight
スクロール要素の高さ
scrollHeight
スクロール要素内の高さ
例:
 body(画面全体)でoverflowしている場合、
 ブラウザ表示領域がclientHeight(例として: 1000px)
 overflowによりhidden状態の要素を含む高さがscrollHeight(例として: 10000px)
 今のスクロール量がscrollTop(上の例で考えた場合、画面2つ分程度スクロールしていたら、2000px)
 上の例の場合のスクロール率は2000px/10000pxで20%