よく調べると、かなり簡単に、普遍的に記述できる。
例えば、div タグの記述と、スタイルシートが以下のようになっていた場合、
<div id="sample" class="box"> ... </div>
<style type="text/css">
.box{
border: 1px solid #e0e0e0;
width: 400px;
height: 200px;
overflow-y: scroll;
}
</style>
この height の数値に左右されずに、jQuery で以下の様に書ける。
$(function(){
$('#sample').scroll(function(){
if *1 == $(this).scrollTop()){
// スクロール終端に達した時の処理を行う。
alert('bottom edge!!');
// 位置 120 まで、スクロールを戻すなら、alertを実行しないで以下のように scrollTop(px) を実行
// $(this).scrollTop(120);
}
});
});
この $(this).get(0).scrollHeight が、overflowによって画面上に表示されていない要素の内容も含めた高さであり、
この高さから、スクロールバーになっている領域の高さを差し引いた位置と
.scrollTop() で求めた値が一致した時が、終端に達した時になる。
*1:$(this).get(0).scrollHeight - $(this).height(
