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

More than 5 years have 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