Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

今までどういうふうに実装されているのか知らなかったので、
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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away