How do I detect that a div with overflow has scrolled to the bottom?

Question

<div id="item-group" class="scroll-box"></div>

.scroll-box {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
}

I want to load items as the user scrolls. I've been facilitating this by detecting when they scroll to the bottom of the screen. I've been trying to do the same with the a div element and can't quite figure it out.

Possible duplicate: http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery — radiaph, Mar 13 '15 at 19:38

noa-dev · Accepted Answer · 2015-03-13T19:27:15.773

Heres the jquery script I wrote recently to get 9gag posts as I scroll. I hope it helps you:

Note the magic for the check if you have scrolled to the bottom happens in $(window).scroll function

<script>
    var nextPageId = '0'
        function loadNextPage(){
            $.getJSON("http://infinigag.eu01.aws.af.cm/trending/"+nextPageId, function(response){
                $.each(response.data, function(){
                    var $img = $('<img/>', {src: this.images.large})
                    $('body').append($img)
                })
                nextPageId = response.paging.next
            })
        }
        loadNextPage()
        var debounceNextPage = debounce(loadNextPage, 100)

        var $document = $(document)
        var $window = $(window)
        $(window).scroll(function(e){
            // console.log(e)
            if($document.height() - $window.scrollTop() == $window.height()){
                console.log("bottom");

                // loadNextPage()
                debounceNextPage()
            }
        })
        // Returns a function, that, as long as it continues to be invoked, will not
        // be triggered. The function will be called after it stops being called for
        // N milliseconds. If `immediate` is passed, trigger the function on the
        // leading edge, instead of the trailing.
        function debounce(func, wait, immediate) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        };
    </script>

EDIT

$(".box").scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        $("span").show();    
    } else {
        $("span").hide();
    }
});

`$(window).scroll` is never fired when you are scrolling a `div`. I know how to hook `$(window).scroll`. — Jordan, Mar 13 '15 at 19:25
I tried that. My problem, I believe, is that I am rendering this content after load. — Jordan, Mar 13 '15 at 20:05

How do I detect that a div with overflow has scrolled to the bottom?

1 Answers1