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