53
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

53
45
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
53
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?