jquery - jqueryはスクロールの速度を測定します - ページの上から下へのスクロールが速すぎます

Question

ユーザーがページの一番上の位置からページの一番下の位置まで高速 (つまり、1 秒) にスクロールしたときに、jquery を使用してアクションを検出して実行するのはホットですか? (ページがスクロール可能な場合のみ)

HTMLマーク（ページ上の要素）ではなく、相対値に基づいて普遍的な解決策を見つけたい.

注: DOM 対応後のユーザーの視点がページの上部にあることを確認する必要があると思います。

Answer 1

2 つの要素に基づく時限イベントを使用できます。これは非常に正確です。

スクロール後に要素が表示されるかどうかを確認する

これを拡張したい場合は、いくつかの要素を使用して、要素間の平均速度を計算できます:)

<script>
var finalFired = false;
var now = new Date().getTime();
function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).scroll(function(){
    if(!finalFired){
        if(isScrolledIntoView("div:last")){
            finalFired = true;
            var then = new Date().getTime();
            alert(then-now);
        }
    }
});
</script>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>
<div style="height:100%;">Test</div>