Detect dead scrolling at the bottom of the page (mousewheel, scroll events)

Question

I'm looking to detect when a user has scrolled to the bottom of a page and then attempts to continue scrolling but where there's nothing left to scroll/view.

I'm creating usability metrics where dead scroll is one metric and need a way to accurately detect when users try to scroll but are not offered anything left to see.

I need something that fires when the mousewheel event initiates but the page does not scroll, with up/down direction.

Answer 1

Here's an exert from a script I'm using to stop the page from animating scroll when the bottom has been reached :

var gate = $(window), edge;
setLength();

gate.resize(function() {
  setLength();
});

function setLength() {
  edge = $(document).height()-gate.height();
}

gate.mousewheel(function(event, delta) {

    outset = gate.scrollTop();
    if (delta == 1 && outset == 0 ) console.log('top');
    if (delta == -1 && outset == edge) console.log('bottom');
});

I'm using the mousewheel plugin, it's just great and for any good cross browser support you'd have to write a bunch of code to normalise wheel events anyway...

https://plugins.jquery.com/mousewheel/

I guess this will do what was posed in the question - detect if the mousewheel event would make the page scroll beyond it's limits. For the thought experiment though you could also be a step ahead of this but only accurately if mousewheel is used as a setter. The page could be made to scroll an exact amount of pixels when the user fires a mouswheel event. And when the destination of the page is known, you could check if that falls within reaching the top or bottom of the page.