jsで「最後までスクロールされた」というEventをキャッチする

今までどういうふうに実装されているのか知らなかったので、
jquery_bottomを読み解いて理解したのでメモ。

jquery_bottomはこちら。
https://github.com/jimyi/jquery_bottom

必要な情報

• 要素の表示領域
• 要素のスクロール分を含めた高さ
• 要素のスクロール位置

この情報がわかれば、下記の情報を導き出せる。
「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」

「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。

実装してみる

scroll.js

// スクロールさせる要素を取得
var elm = document.getElementById('scrollElement');

// 要素の表示領域を取得
var height = elm.offsetHeight;

// スクロールイベントを定義
elm.onscroll = function() {
    // 要素のスクロール分を含めた高さを取得
    var scrollHeight = elm.scrollHeight;

    // 要素のスクロール位置を取得
    var scrollTop = elm.scrollTop;

    // 現在の表示位置の高さ 
    var scrollPosition = height + scrollTop;

    // どれだけ近づいたかを判断する値
    // 0に近いほど、スクロールの最終が近い
    var proximity = 0;

    if ((scrollHeight - scrollPosition) / scrollHeight <= proximity) {
        alert('Scroll finish!!');
    }
}

サンプルはこちら。
http://jsdo.it/tanihiro/scroll-finish-event

注意点

document.Element.scrollHeightは、要素のpaddingも含めるので、
paddingを設定している場合は、その値を考慮しないといけない。

参考
https://developer.mozilla.org/en-US/docs/DOM/element.scrollHeight