如何检测到具有溢出的div已滚动到底部？

Question

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

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

我想在用户滚动时加载项目。 我一直在通过检测它们何时滚动到屏幕底部来促进这一工作。 我一直在尝试对div元素执行相同的操作，但还不太清楚。

Answer 1

这是我最近编写的jquery脚本，可在滚动时获得9gag帖子。 我希望它可以帮助您：

注意检查是否已滚动到底部的魔术发生在$(window).scroll函数中

<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>

编辑

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