Posted at

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