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

时间:2012-05-14 08:56:32

标签: jquery scroll

当用户从页面顶部位置到页面底部位置滚动(他的观点)快速(即1秒)时,用jquery检测并执行动作很热门? (仅当页面可滚动时)

想要找到基于相对值的通用解决方案,而不是基于html标记(页面上的元素)。

注意: 我认为需要检查以确保DOM-ready之后的用户视点位于页面顶部。

1 个答案:

答案 0 :(得分:1)

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

Check if element is visible after scrolling

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

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