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.

Butlery

Show your code what you did... – Prolific

You need to show some effort, stackoverflow is not a website to receive complete code solutions to any question. – Cannes

Why don't you just setup a test with jquery and see if the scroll event even fires when dead scroll happens – Specs

This is probably just what you need – Durand

jsfiddle.net/c8s37f76 scroll event does not fire when you try to scroll down more when you reach the bottom – Specs

See #8190340 there is a plugin you can use. I never used it but I think you can look into it – Specs

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.

Hamite

Nice, let me give this a try. – Butlery

Did this work out? If you need pixel accuracy while the user scrolls towards the outer limits of the page, you could consider using the smooth scroll script I wrote (where the above snippet is taken from) : codepen.io/Shikkediel/pen/GJRbOV?editors=001. – Hamite

Answer 2

Add the windows scrollTop() and height. If it's equal to the documents height, you are at the bottom of the page.

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       console.log("Page bottom reached!");
   }
});

http://jsfiddle.net/1v3cakn9/1/

Arquebus

Nice, but once its reached the bottom, and a user tries to keep scrolling, can we trigger something else? – Butlery

You would just put whatever you want to do in place of the console log – Arquebus

Old, but still.. Scroll event does not keep triggering once the bottom is reached, so this doesn't work. The console.log only happens once, if you keep scrolling when you hit the bottom, it doesn't trigger anymore. The OP wanted something to detect when a person keeps scrolling after they reach the end. – Mcglothlin