Nsryjdtyk

Nick Craver's answer works fine, spare the issue that the value of $(document).height() varies by browser.

To make it work on all browsers, use this function from James Padolsey:

function getDocHeight() {

    var D = document;

    return Math.max(

        D.body.scrollHeight, D.documentElement.scrollHeight,

        D.body.offsetHeight, D.documentElement.offsetHeight,

        D.body.clientHeight, D.documentElement.clientHeight

    );

}

in place of $(document).height(), so that the final code is:

$(window).scroll(function() {

       if($(window).scrollTop() + $(window).height() == getDocHeight()) {

           alert("bottom!");

       }

   });

I'm not exactly sure why this has not been posted yet, but as per the documentation from MDN, the simplest way is by using native javascript properties:

element.scrollHeight - element.scrollTop === element.clientHeight

Returns true when you're at the bottom of any scrollable element. So simply using javascript:

element.addEventListener('scroll', function(event)

{

    var element = event.target;

    if (element.scrollHeight - element.scrollTop === element.clientHeight)

    {

        console.log('scrolled');

    }

});

scrollHeight have wide support in browsers, from ie 8 to be more precise, while clientHeight and scrollTop are both supported by everyone. Even ie 6. This should be cross browser safe.

For those using Nick's solution and getting repeated alerts / events firing, you could add a line of code above the alert example:

$(window).scroll(function() {

   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

       $(window).unbind('scroll');

       alert("near bottom!");

   }

});

This means that the code will only fire the first time you're within 100px of the bottom of the document. It won't repeat if you scroll back up and then back down, which may or may not be useful depending on what you're using Nick's code for.

Further to the excellent accepted answer from Nick Craver, you can throttle the scroll event so that it is not fired so frequently thus increasing browser performance:

var _throttleTimer = null;

var _throttleDelay = 100;

var $window = $(window);

var $document = $(document);



$document.ready(function () {



    $window

        .off('scroll', ScrollHandler)

        .on('scroll', ScrollHandler);



});



function ScrollHandler(e) {

    //throttle event:

    clearTimeout(_throttleTimer);

    _throttleTimer = setTimeout(function () {

        console.log('scroll');



        //do work

        if ($window.scrollTop() + $window.height() > $document.height() - 100) {

            alert("near bottom!");

        }



    }, _throttleDelay);

}

Nick Craver's answer needs to be slightly modified to work on iOS 6 Safari Mobile and should be:

$(window).scroll(function() {

   if($(window).scrollTop() + window.innerHeight == $(document).height()) {

       alert("bottom!");

   }

});

Changing $(window).height() to window.innerHeight should be done because when the address bar is hidden an additional 60px are added to the window's height but using $(window).height() does not reflect this change, while using window.innerHeight does.

Note: The window.innerHeight property also includes the horizontal scrollbar's height (if it is rendered), unlike $(window).height() which will not include the horizontal scrollbar's height. This is not a problem in Mobile Safari, but could cause unexpected behavior in other browsers or future versions of Mobile Safari. Changing == to >= could fix this for most common use cases.

Read more about the window.innerHeight property here

Here's a fairly simple approach:

elm.onscroll = function() {

    if(elm.scrollTop + elm.clientHeight == elm.scrollHeight) //User has scrolled to the bottom of the element

}

Here is a piece of code that will help you debug your code, I tested the above answers and found them to be buggy. I have test the followings on Chrome, IE, Firefox, IPad(Safari). I don't have any others installed to test...

<script type="text/javascript">

   $(function() {

      $(window).scroll(function () {

         var docElement = $(document)[0].documentElement;

         var winElement = $(window)[0];



         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {

            alert('bottom');

         }

      });

   });

</script>

There may be a simpler solution, but I stopped at the point at which IT WORKED

If you are still having problems with some rogue browser, here is some code to help you debug:

<script type="text/javascript">

   $(function() {

      $(window).scroll(function () {

         var docElement = $(document)[0].documentElement;

         var details = "";

         details += '<b>Document</b><br />';

         details += 'clientHeight:' + docElement.clientHeight + '<br />';

         details += 'clientTop:' + docElement.clientTop + '<br />';

         details += 'offsetHeight:' + docElement.offsetHeight + '<br />';

         details += 'offsetParent:' + (docElement.offsetParent == null) + '<br />';

         details += 'scrollHeight:' + docElement.scrollHeight + '<br />';

         details += 'scrollTop:' + docElement.scrollTop + '<br />';



         var winElement = $(window)[0];

         details += '<b>Window</b><br />';

         details += 'innerHeight:' + winElement.innerHeight + '<br />';

         details += 'outerHeight:' + winElement.outerHeight + '<br />';

         details += 'pageYOffset:' + winElement.pageYOffset + '<br />';

         details += 'screenTop:' + winElement.screenTop + '<br />';

         details += 'screenY:' + winElement.screenY + '<br />';

         details += 'scrollY:' + winElement.scrollY + '<br />';



         details += '<b>End of page</b><br />';

         details += 'Test:' + (docElement.scrollHeight - winElement.innerHeight) + '=' + winElement.pageYOffset + '<br />';

         details += 'End of Page? ';

         if ((docElement.scrollHeight - winElement.innerHeight) == winElement.pageYOffset) {

             details += 'YES';

         } else {

             details += 'NO';

         }



         $('#test').html(details);

      });

   });

</script>

<div id="test" style="position: fixed; left:0; top: 0; z-index: 9999; background-color: #FFFFFF;">

I hope this will save someone some time.

Please check this answer

 window.onscroll = function(ev) {

    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {

       console.log("bottom");

    }

};

You can do footerHeight - document.body.offsetHeight to see if you are near the footer or reached the footer

var elemScrolPosition = elem.scrollHeight - elem.scrollTop - elem.clientHeight;

It calculates distance scroll bar to bottom of element.
Equal 0, if scroll bar has reached bottom.

This is my two cents:

$('#container_element').scroll( function(){

        console.log($(this).scrollTop()+' + '+ $(this).height()+' = '+ ($(this).scrollTop() + $(this).height())   +' _ '+ $(this)[0].scrollHeight  );

        if($(this).scrollTop() + $(this).height() == $(this)[0].scrollHeight){

            console.log('bottom found');

        }

    });

Pure JS with cross-browser and debouncing (Pretty good performance)

var CheckIfScrollBottom = debouncer(function() {

    if(getDocHeight() == getScrollXY()[1] + window.innerHeight) {

       console.log('Bottom!');

    }

},500);



document.addEventListener('scroll',CheckIfScrollBottom);



function debouncer(a,b,c){var d;return function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f)}}

function getScrollXY(){var a=0,b=0;return"number"==typeof window.pageYOffset?(b=window.pageYOffset,a=window.pageXOffset):document.body&&(document.body.scrollLeft||document.body.scrollTop)?(b=document.body.scrollTop,a=document.body.scrollLeft):document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)&&(b=document.documentElement.scrollTop,a=document.documentElement.scrollLeft),[a,b]}

function getDocHeight(){var a=document;return Math.max(a.body.scrollHeight,a.documentElement.scrollHeight,a.body.offsetHeight,a.documentElement.offsetHeight,a.body.clientHeight,a.documentElement.clientHeight)}

Demo : http://jsbin.com/geherovena/edit?js,output

PS: Debouncer, getScrollXY, getDocHeight not written by me

I just show how its work, And how I will do

Nick answers its fine but you will have functions which repeats itsself while scrolling or will not work at all if user has the window zoomed. I came up with an easy fix just math.round the first height and it works just as assumed.

    if (Math.round($(window).scrollTop()) + $(window).innerHeight() == $(document).height()){

    loadPagination();

    $(".go-up").css("display","block").show("slow");

}

You can try the following code,

$("#dashboard-scroll").scroll(function(){

    var ele = document.getElementById('dashboard-scroll');

    if(ele.scrollHeight - ele.scrollTop === ele.clientHeight){

       console.log('at the bottom of the scroll');

    }

});

Try this for match condition if scroll to bottom end

if ($(this)[0].scrollHeight - $(this).scrollTop() == 

    $(this).outerHeight()) {



    //code for your custom logic



}

Let me show approch without JQuery. Simple JS function:

function isVisible(elem) {

  var coords = elem.getBoundingClientRect();

  var topVisible = coords.top > 0 && coords.top < 0;

  var bottomVisible = coords.bottom < shift && coords.bottom > 0;

  return topVisible || bottomVisible;

}

Short example how to use it:

var img = document.getElementById("pic1");

    if (isVisible(img)) { img.style.opacity = "1.00";  }

All these solutions doesn't work for me on Firefox and Chrome, so I use custom functions from Miles O'Keefe and meder omuraliev like this:

function getDocHeight()

{

    var D = document;

    return Math.max(

        D.body.scrollHeight, D.documentElement.scrollHeight,

        D.body.offsetHeight, D.documentElement.offsetHeight,

        D.body.clientHeight, D.documentElement.clientHeight

    );

}



function getWindowSize()

{

  var myWidth = 0, myHeight = 0;

  if( typeof( window.innerWidth ) == 'number' ) {

    //Non-IE

    myWidth = window.innerWidth;

    myHeight = window.innerHeight;

  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {

    //IE 6+ in 'standards compliant mode'

    myWidth = document.documentElement.clientWidth;

    myHeight = document.documentElement.clientHeight;

  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {

    //IE 4 compatible

    myWidth = document.body.clientWidth;

    myHeight = document.body.clientHeight;

  }

  return [myWidth, myHeight];

}



$(window).scroll(function()

{

    if($(window).scrollTop() + getWindowSize()[1] == getDocHeight())

    {

        alert("bottom!");

    }

});

I used @ddanone answear and added Ajax call.

$('#mydiv').on('scroll', function(){

  function infiniScroll(this);

});



function infiniScroll(mydiv){

console.log($(mydiv).scrollTop()+' + '+ $(mydiv).height()+' = '+ ($(mydiv).scrollTop() + $(mydiv).height())   +' _ '+ $(mydiv)[0].scrollHeight  );



if($(mydiv).scrollTop() + $(mydiv).height() == $(mydiv)[0].scrollHeight){

    console.log('bottom found');

    if(!$.active){ //if there is no ajax call active ( last ajax call waiting for results ) do again my ajax call

        myAjaxCall();

    }

}

}

To stop repeated alert of Nick's answer

ScrollActivate();



function ScrollActivate() {

    $(window).on("scroll", function () {

        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {

            $(window).off("scroll");

            alert("near bottom!");

        }

    });

}

My solution in plain js:

let el=document.getElementById('el');

el.addEventListener('scroll', function (e) {

		if (el.scrollHeight - el.scrollTop - el.clientHeight<0) {

      console.log('Bottom')

    }

});

#el{

  width:300px;

  height:100px;

  overflow-y:scroll;

}

<div id="el">

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

<div>content</div>

</div>

Here's my two cents as the accepted answer didn't work for me.

var documentAtBottom = (document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight;