0

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.

abrahab
  • 2,292
  • 8
  • 33
  • 57

1 Answers1

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>
Community
  • 1
  • 1
Bloafer
  • 1,314
  • 7
  • 12
  • thanks, that is exactly what I an searching for, but I does not want to add special elements to the page. I am searching for universal solution without any points added to html. Maybe to divide windows.height to the areas and detect speed by them? For start "a timed event based on two elements" - is fine, but also the question about the last element. As wroted, want universal solution based on relative values. – abrahab May 14 '12 at 09:09
  • You could use something like the above code to produce the result, but it may need some modification to work the way you want – Bloafer May 14 '12 at 13:20
  • thanks. :) already made something similar from the code of the link that you post. nice solution, but think not the best, because i think its is possible to make it without divs (related to content) - more universal, but for me it is enough – abrahab May 14 '12 at 13:30