时间戳

首页 > 解决方案 > Intersectionobserver 和 InnerHTML 的无限滚动

javascript - Intersectionobserver 和 InnerHTML 的无限滚动

问题描述

我正在尝试进行无限滚动（没有 jQuery）以在页面中显示更多结果。我正在使用 anIntersectionObserver来检测调用的 div #paginate，每次它进入屏幕时，#result都会刷新 div。

var result = document.querySelector('#result');
var paginate = document.querySelector('#paginate');

var observer = new IntersectionObserver(entries => {
if (entries.some(entry => entry.isIntersecting))
{
var pagination = 10;
fetch('/kernel/search.php?pagination='+pagination)
.then((response) => {
return response.text();
})
.then((html) => {
result.innerHTML = html;
});
}
});

observer.observe(paginate);

这是带有 HTML 的完整代码视图：

<html>
<body>

<div class="row justify-content-sm-center justify-content-md-center justify-content-lg-center justify-content-xl-start no-gutters min-vw-100" id="result">
<div class="col-sm-11 col-md-11 col-lg-9-result col-xl-4-result order-0">

<div class="card mx-3 mt-3">
<div class="card-body">
<a class="text-decoration-none" href="?topic=result-1">
<h5 class="card-title"> 
Result 1    
</h5>
</a>
<p class="card-text text-truncate"> 
Result 1 description.</p>
</div>
</div>

<div class="card mx-3 mt-3">
<div class="card-body">
<a class="text-decoration-none" href="?topic=result-2">
<h5 class="card-title"> 
Result 2    
</h5>
</a>
<p class="card-text text-truncate"> 
Result 2 description.</p>
</div>
</div>

<div class="alert alert-light text-dark text-center border mx-3 my-3" id="paginate">
More results
</div>

</div>
</div>

<script>    
var result = document.querySelector('#result');
var paginate = document.querySelector('#paginate');

var observer = new IntersectionObserver(entries => {
if (entries.some(entry => entry.isIntersecting))
{
var pagination = 10;
fetch('/kernel/search.php?pagination='+pagination)
.then((response) => {
return response.text();
})
.then((html) => {
result.innerHTML = html;
});
}
});

observer.observe(paginate);
</script>

</body>
</html>

它有效，但仅在第一次有效，此后不会刷新#resultdiv。我可以在Web Browser > Inspect > Networkfetch选项卡中看到工作，但在第一次刷新div 后没有任何活动，这意味着它不再检测到div。#result#paginate

这里发生了什么？我认为这是因为我正在使用 aninnerHTML并且在第一次刷新 div 后observer无法检测到div。我该如何解决这个问题？#paginate#result

标签： javascripthtmlinnerhtmlwebapiintersection-observer

解决方案

我用 jQuery 和.scroll函数完成了它，并像这样使用了 ajax，也许我的代码可以帮助您并使其适应您的需求。

$('#customersList').scroll(function () {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight - 5000) {
        // Do your stuff here.
        getCustomers();
    }
})


function getCustomers(){
    let $customerList = $('#customersList');
    let offset        = ($customerList.attr('data-offset')) ? 
    
    $customerList.attr('data-offset') : 0;

    if ($customerList.data('requestRunning')) {
        return;
    }
    $customerList.data('requestRunning', true);

    return $.ajax({
                  type: "GET",
                  data: {offset: offset},
                  url : routes.routes.customers.get
              })
        .done(function (data) {
            let _htmlCustomersList = ($customerList.is(':empty')) ? '' : $customerList.html();
            let response           = data.data;
            
            if (response) {
                for (const i in response) {
                    let v = JSON.parse(response[i]);
                    _htmlCustomersList += '<div class="client-group edit" data-id="' + v['id'] + '"></div><hr>';
                }

                offset = parseInt(offset) + 200;
                $customerList.attr('data-offset', offset).html(_htmlCustomersList);
            }
        })
        .always(function () {
            $customerList.data('requestRunning', false);
        });

}

我的 getCustomer 函数在到达页面末尾之前运行，每次加载 200 多个项目。

我希望这可以帮助你一点点

推荐阅读