CSS
JavaScript

document.body.scrollTopが常に0を返す謎を調べてみた

More than 1 year has passed since last update.

JavaScriptを使って現在のスクロール位置を取得するために

document.body.scrollTop

としますが、この値がどうしても常に 0 を返してしまうことがありました。

bodyにoverflow: auto

結論としては、CSSに

html, body {
  height:100%;
  min-height:100%;
  overflow:auto;
}

という指定がしてあったからでした。

これは body の子要素で body からはみ出る部分は自動的にスクロールバーが表示されて、スクロールが出来るようになります。

詳しくはこう

で、図にしてみるとわかりやすいのですが

+-------------------------------------------------------------
| html
| +-------------------------------+←ーー ここがscrollTop = 常に0
| | body                          |   ↑
| | +---------------------------+ |   |
| | |                         ↑ | |  bodyではスクロールしないで
| | |               Scroll Area | |  子要素の中でスクロールする
| | |                         ↓ | |   |
| | +---------------------------+ |   ↓
| +-------------------------------+←ーー
+--------------------------------------------------------------

こんな感じになってました。普通はこんなんだと思う。

+--------------------------------------
| html
| +-------------------------------+
| | body                       ↑  |
| |                            |  |
| |                  Scroll Area  |
| |                            |  |
| |                            ↓  |
| +-------------------------------+
+--------------------------------------

あとがき

原因がわかれば結構単純なんですが、3日くらいはまりました orz