Detect when Scroll reaches the BOTTOM of the page [ without jQuery ]

Question

I want to alert something when the scroll reaches the BOTTOM of the page, like this:

$(function(){
  $(document).scroll(function() {
    if($(document).scrollTop() == 0) alert("top");
  })
})

But without jQuery, and alert when reaches the Bottom.

Plain javascript method to detect bottom of an element http://stackoverflow.com/a/13526491/1488136 — Harsh .., Nov 23 '12 at 09:55
Answer is available here https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom — Nazmul Abedin, Oct 30 '17 at 06:23

score 44 · Answer 1 · answered Sep 30 '13 at 19:44

44

document.addEventListener('scroll', function (event) {
    if (document.body.scrollHeight == 
        document.body.scrollTop +        
        window.innerHeight) {
        alert("Bottom!");
    }
});

JSFiddle here: http://jsfiddle.net/cSer6/

answered Sep 30 '13 at 19:44

brendan

11,831
3
26
26

10

This code does not work on all browsers - here is a complete solution synthesized from several sources (URLs in the code): http://jsfiddle.net/W75mP/ – brendan Nov 21 '13 at 21:30
what browser dont support this? do you know about mobile? – ncubica Jul 24 '15 at 23:46

ampersand · Answer 2 · 2012-04-09T00:53:20.973

4

if(window.addEventListener){
    window.addEventListener('scroll',scroll)
}else if(window.attachEvent){
    window.attachEvent('onscroll',scroll);
}

function scroll(ev){
    var st = Math.max(document.documentElement.scrollTop,document.body.scrollTop);
    if(!st){
            console.log('top');
    }else if((st+document.documentElement.clientHeight)>=document.documentElement.scrollHeight ){
           console.log('bottom');
    }
}

example: http://jsfiddle.net/ampersand/AEnzJ/

tested with http://browserling.com in chrome 17/18, safari 5, ff 10/11.0, ie 7-9

edited Apr 09 '12 at 00:53

answered Apr 08 '12 at 02:29

ampersand

4,264
2
24
32

SyntaxError: Unexpected token ILLEGAL – Apr 08 '12 at 02:32
@Tomirammstein in what browser? – ampersand Apr 08 '12 at 02:36
Google Chrome, and it's rare :s – Apr 08 '12 at 02:38
Post the code in the console of Google Chrome and look the error – Apr 08 '12 at 02:42
interesting. there was some kind of hidden character between the `)` and the `;`. fixed. try now. – ampersand Apr 08 '12 at 02:44
Now i have this code `document.addEventListener=document.addEventListener || document.attachEvent; document.addEventListener('scroll',function(ev){ if ( document.body.scrollTop === document.body.height ) { console.log('Bottom'); } });` But i can't detect when scroll reaches the bottom of the document. – Apr 08 '12 at 02:50
@Tomirammstein: ive updated the answer for this new requirement. tested in chrome 18, safari 5.0.2 and ff 11.0 – ampersand Apr 08 '12 at 21:31
as I said: 'tested in chrome 18, safari 5.0.2 and ff 11.0'. please test it in ie8 and let us know what you find. – ampersand Apr 08 '12 at 22:21
I tested in `vivaldi` which is a chrome based browser, sometimes this works well, sometimes `st+document.documentElement.clientHeight` is a little less than `document.documentElement.scrollHeight` just is `(1 - the decimal part)`, and console does not print bottom, so I adopt it to `Math.ceil(st + document.documentElement.clientHeight)`, seems works well so far – towith Jul 31 '21 at 05:20

score 4 · Answer 3 · answered Nov 01 '14 at 16:08

4

This is working for me in IE

document.onscroll = function() {
    if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
    {
        alert('bottom');
    }
}

http://jsfiddle.net/cSer6/46/

answered Nov 01 '14 at 16:08

y0j0

3,369
5
31
52

score 2 · Answer 4 · answered Apr 08 '12 at 02:22

2

document.onscroll = function() {
    if(!document.body.scrollTop){
        alert('top');
    }
}

JSFiddle demo

answered Apr 08 '12 at 02:22

Dennis

32,200
11
64
79

2

I would prefer `.addEventListener('scroll', ...)` over `.onscroll = ...`, for the additional flexibility and avoiding colliding with other event handlers. Unfortunately this doesn't work in IE≤8, but it's easy enough to polyfill. – ephemient Apr 08 '12 at 02:27
Can you post here an example ? – Apr 08 '12 at 02:28
@Tomirammstein I posted a jsfiddle demo - I don't have access to IE8 but `scrollTop` originated in MSIE so it should work. – Dennis Apr 08 '12 at 02:32
1

But I need to detect when the scroll reaches the bottom of the page – Apr 08 '12 at 02:36
the question is "Detect when Scroll reaches the **BOTTOM** of the page" – T J Jul 02 '14 at 06:15

score 2 · Answer 5 · answered Jul 11 '22 at 17:38

2

if (document.body.scrollHeight <= Math.ceil(window.pageYOffset + window.innerHeight)) {

This worked in Brave.

answered Jul 11 '22 at 17:38

tiller1010

61
8

Saxoier · Answer 6 · 2012-04-09T00:37:17.317

function addEvent(node, type, callback) {
    if('addEventListener' in node) {
        node.addEventListener(type, callback, false);
    } else {
        node.attachEvent('on' + type, callback);
    }
}

addEvent(window, 'scroll', (function() {
    // https://developer.mozilla.org/en/DOM/window.scrollY#Notes
    var stObj, stProp;
    if('scrollY' in window) { // CSSOM:
        // http://www.w3.org/TR/cssom-view/#extensions-to-the-window-interface
        stObj = window;
        stProp = 'scrollY';
    } else if('pageYOffset' in window) { // CSSOM too
        stObj = window;
        stProp = 'pageYOffset';
    } else {
        stObj = document.documentElement.clientHeight ?
            document.documentElement : document.body;
        stProp = 'scrollTop';
    }

    var node = document.documentElement.clientHeight ?
        document.documentElement :
        document.body; // let's assume it is IE in quirks mode
    var lastSt = -1;
    return function(e) {
        if(lastSt !== stObj[ stProp ] && // IE <= 8 fires twice
           node.scrollHeight === stObj[ stProp ] + node.clientHeight) {
            alert('bottom');
        }
        lastSt = stObj[ stProp ];
    };
})());

It's successfully tested with Firefox 11, Chrome 17, IE 9 (X-UA-Compatible: 8, 7, 5) and Opera 11.60.

this crashed safari 5 and ff 11.0 for me. safari displayed infinite alerts and ff just locked up. chrome 18 behaved well. — ampersand, Apr 08 '12 at 22:32
@ampersand: Fx gets black because of the alert. Remove it and everything is fine (I'll not remove it from this example because of this bug). I don't own a copy of Safari. Maybe it is a similar issue like IE in quirks mode. In IE `document.documentElement.scrollTop` is always zero. — Saxoier, Apr 08 '12 at 22:40
Thanks @Saxoier but I need alert when the scroll bar reaches the bottom of the page; but thanks anyway :) — , Apr 08 '12 at 22:40
@Tomirammstein: You wrote '[...] reaches the limit of the page [...]' and in your example '`if($(document).scrollTop() == 0) alert("top"); `'. I can spot the upper limit not the lower limit. Edit your question. — Saxoier, Apr 08 '12 at 22:44

Detect when Scroll reaches the BOTTOM of the page [ without jQuery ]

6 Answers6

Linked