Windowの下までスクロールされたことを検出する
AutoPagerizeのようなことを実現するために、Windowの下までスクロールされたことを検出するJavaScriptを調べてみた。
意外と苦労したのでメモ。
ソース
// 垂直スクロール量を取得する var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 表示領域の高さを取得する var clientHeight = document.body.clientHeight; // スクロールバーで隠れた領域を含むコンテンツ領域の高さを取得する var scrollHeight = document.body.scrollHeight; // コンテンツ領域の底までの残り領域 var remain = scrollHeight - clientHeight - scrollTop;
Firefox2、IE6で動作確認。このコードではOperaやSafariではもしかしたら動かないかも。(下の参考記事を参照)
スクロールバーを一番下まで下げた場合、IE6だとremainは0になるが、Firefox2では1となった。
まぁ、remainが60くらいになったら、何らかのアクションを起こすようなコードにすれば特に問題ないので良しとしよう。
参考にした記事
- ブラウザのスクロール量を取得するには?
- ブラウザの表示領域のサイズを取得する方法
- ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法