Question

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.

Answer 1

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>