jQuery总是在视口中找到元素

Question

我在包含某些文章的页面中具有此结构

<div class="articles">
    <h1>article title</h1>
    <br>
    <h1>article title</h1>
    ...................
    (long list)
</div>

<span id="loader">Loading</span> // visibility: hidden

并且此代码检查loader是否进入视口以使用AJAX加载更多文章

$(function () {
   $(window).scroll(function () {
        if (isScrolledIntoView("#loader")) {
            console.log('loader in view');
            $("#loader").remove();
            var cur_page = parseInt($("#cur_page").text()),
                all_pages = parseInt($("#all_pages").text()),
                new_page = cur_page + 1;
            if(new_page <= all_pages){
                $(".loader_image").css('visibility', 'visible');
                $("#cur_page").text(new_page);
                $.post('include/list_articles_ajax.php', {
                    'page': new_page,
                    'limit': "<?=$limit?>"
                }).done(function (data) {
                    $(".loader_image").css('visibility', 'hidden');
                    var parsed = $.parseJSON(data);
                    $(parsed).each(function (i, val) {
                        $(".articles").append("<a href='article.php?article="+parsed[i].slug+"'>"+parsed[i]
                            .title+"</a>");
                        $(".articles").append("<p>**********************************************************</p>");
                    });
                    $("body").append('<span id="loader">Loading</span>');
                });
            }
        }
    });
});

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    if ($(elem).length) {
        var elemTop = $(elem).offset().top;
        return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
    }
    return false;
}

但是一旦我开始滚动，ajax就会被触发，并且控制台会显示loader in view，尽管它不在视口中。我尝试过此代码

$(window).scroll(function() {
        var top_of_element = $("#loader").offset().top;
        var bottom_of_element = $("#loader").offset().top + $("#loader").outerHeight();
        var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
        var top_of_screen = $(window).scrollTop();

        if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            console.log('loader in view');
        } else {
            // the element is not visible, do something else
        }
    });

我也测试了此jQuery - Detecting if element is in viewport

还有这个https://gist.github.com/EvanHerman/a1045c19e115edc18b12

但是同样的错误，它不会等待到达#loader来触发ajax。一旦我开始滚动，它就会开始，仍然在页面顶部。为什么会这样以及如何解决？

Answer 1

您可以阅读：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API。