7cc@はてなブログ

JavaScriptとかとか

スクロール位置が取れない htmlやbodyにoverflowを指定するときは注意

html, bodyはページサイズ・ウィンドウサイズを決定する要素です。
これらにoverflow, height:100%などサイズに関わるスタイルを指定するとJavaScriptによる位置やサイズ取得に支障が出ることがあります。よほどの理由がない限りしてはいけません
スタイル目的であれば素直にdivを追加してください。

例1

標準モードの時は、Webkit以外のモダンブラウザはdocument.documentElement.scrollTop/Leftでスクロール量を取得します。

html{
  overflow: hidden;
  height: 100%;
}
body{
  overflow: auto;
  height: 100%;
}

と指定すると、Webkit以外でbody.scrollTopでスクロール量が返り、Webkitでは取得不可能になります。

例2

互換表示でかつブラウザがIEの場合、スクロール量は document.body.scrollTop(Left) によって取得します。

html{overflow: auto}
body{overflow: hidden}

と指定すると、スクロール量が取得できなくなります。