Javascript 如何检测溢出的div已滚动到底部？ .滚动框{ 溢出x：隐藏； 溢出y：自动； 最大高度：计算（100vh-300px）； }

我想在用户滚动时加载项目。我一直在通过检测它们何时滚动到屏幕底部来促进这一点。我一直在尝试对

div

元素执行相同的操作，但还不能完全理解它。

这是我最近编写的jquery脚本，用于在滚动时获取9gag帖子。我希望它能帮助你：

注意检查是否已滚动到底部的魔法发生在

$（窗口）中。滚动

功能

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

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

---

$（窗口）。当您滚动
div
时，永远不会触发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();
    }
});