スクロールの開始と静止を検知するイベント
スクロールの開始を検知するscrollstartイベント
そして、スクロールの終了を検出するscrollstopイベント
の実装方法
例えば
一番上までスクロールしたら
1px下へスクロールさせ
ブラウザのnavigation bar を隠す
こうすると、画面が見やすくなる
$(window).on("scrollstop",function(e){
//スクロール位置が一番上のなったら
if(document.body.scrollTop== 0){
//縦方向へ1pxスクロールする
window.scrollTo(0,1);
}
});
このように、スクロール位置は
document.body.scrollTop
で取得できる
あと、Twitterみたいに、画面の一番下へ
スクロールしたら次のデータを読み込んで表示する
というように、一番下までスクロールしたことを検知するには
$(window).on("scrollstop",function(e){
//一番下までスクロールしたことを検知
if((document.body.scrollTop + window.innerHeight) == document.height){
//一番下までスクロールしたときの処理
}
});
となる
このように、
一番下までスクロールしたときの
スクロール位置である scrollTop
と
スクリーンの縦幅になる window.innerHeight
を足して
document.height
つまり、画面の縦幅と同じなら
一番下に達したと判断できる