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.

You need to show some effort, stackoverflow is not a website to receive complete code solutions to any question. — Trader, Apr 27 '15 at 16:05
Why don't you just setup a test with jquery and see if the scroll event even fires when dead scroll happens — Huangism, Apr 27 '15 at 16:05
[This is probably just what you need](http://stackoverflow.com/a/7513033/3914412) — joakim, Apr 27 '15 at 16:05
http://jsfiddle.net/c8s37f76/ scroll event does not fire when you try to scroll down more when you reach the bottom — Huangism, Apr 27 '15 at 16:08
See http://stackoverflow.com/questions/8189840/get-mouse-wheel-events-in-jquery there is a plugin you can use. I never used it but I think you can look into it — Huangism, Apr 27 '15 at 16:10

Shikkediel · Accepted Answer · 2015-04-27T19:39:24.227

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.

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) : http://codepen.io/Shikkediel/pen/GJRbOV?editors=001. — Shikkediel, Apr 28 '15 at 17:30

score 0 · Answer 2 · answered Apr 27 '15 at 16:47

0

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/

answered Apr 27 '15 at 16:47

Walker Boh

750
6
13

Nice, but once its reached the bottom, and a user tries to keep scrolling, can we trigger something else? – Collarbone Apr 27 '15 at 17:50
You would just put whatever you want to do in place of the console log – Walker Boh Apr 27 '15 at 18:17
2

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. – jsfrocha Sep 01 '16 at 07:14

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

2 Answers2