jQuery测量滚动速度-从页面顶部到底部的滚动速度太快 [英] jquery measure speed of scrolling - too fast scroll from top to the bottom of the page

问题描述

当用户从页面顶部滚动到页面底部快速(即1秒钟)滚动时，是否能够检测并执行jquery动作? (仅当页面可滚动时)

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

注意: 认为需要检查以确保在准备好DOM之后的用户观点是页面的顶部.

解决方案

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

检查元素在滚动后是否可见

如果要扩展此范围，可以使用多个元素并计算出元素之间的平均速度:)

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

Hot to detect and perform an action with jquery when user get scrolled (his point of view) to fast(ie. 1 second) from the top position of the page to the bottom position of the page ? (only if the page is scrollable)

Want to find universal solution based on relative values, not on html marks(elements on the page).

Notes: think need to check to be sure that user view point after DOM-ready is top of the page.

解决方案

You could use a a timed event based on two elements, this would be quite accurate

Check if element is visible after scrolling

If you wanted to extend this you could use several elements and work out the average speed between the elements :)

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

这篇关于jQuery测量滚动速度-从页面顶部到底部的滚动速度太快的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！