Jquery measures scroll speed - scroll down the page too fast

Question

A hot search and execution of an action with jquery, when the user gets a scroll (their point of view) to fast (i.e. 1 second) from the top position of the page to the bottom position of the page? (only if the page scrolls)

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

Notes: think that you need to make sure that the user's viewpoint after the DOM-ready is at the top of the page.

Answer 1

You can use a temporary event based on two elements, that would be pretty accurate

Check if the item is visible after scrolling

If you want to expand this, you can use several elements and work out an average speed between 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>