jquery - jquery测量滚动速度 - 从页面顶部到底部滚动太快

Question

当用户从页面的顶部位置滚动到页面的底部位置（即 1 秒）快速（即 1 秒）时，使用 jquery 检测和执行操作很热门？（仅当页面可滚动时）

希望找到基于相对值的通用解决方案，而不是 html 标记（页面上的元素）。

注意：认为需要检查以确保 DOM 就绪后的用户视点位于页面顶部。

Answer 1

您可以使用基于两个元素的定时事件，这将非常准确

检查滚动后元素是否可见

如果你想扩展它，你可以使用几个元素并计算出元素之间的平均速度:)

<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>