スクロール位置が取れない 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}
と指定すると、スクロール量が取得できなくなります。