首頁猿問使用...

使用 Intersectionobserver 和 InnerHTML 的無限滾動

JavaScript

繁花如伊 2023-02-24 15:22:35

我正在嘗試進行無限滾動（不使用 jQuery）以在頁面中顯示更多結果。我正在使用 anIntersectionObserver來檢測調用的 div #paginate，每次它進入屏幕時，#resultdiv 都會被刷新。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

查看完整描述

4 回答

揚帆大魚

TA貢獻1799條經驗獲得超9個贊

看來您是#paginate在第一次更新后刪除的，因為它在#result.

反對回復 2023-02-24

翻過高山走不出你

TA貢獻1875條經驗獲得超3個贊

.scroll我用 jQuery 和函數完成了它，并像這樣使用了 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 個以上的項目。

我希望這可以幫助你一點點

反對回復 2023-02-24

隔江千里

TA貢獻1906條經驗獲得超10個贊

#result div 是內容的主要包裝器，使用 innerHTML 更新 div 的內容，將導致替換 div 內的整個內容...

除了 innerHTML 是絕對的，并且會刪除任何 DOM 對象（及其事件）因此是不好的做法這一事實之外，它也不是一個好的解決方案，因為您希望在滾動時附加而不是替換數據

我建議在分頁上方添加一個 div，它將保存添加的數據，例如：

...

More results

</div>

然后對添加的內容使用某種附加，例如：

.then((html) => {

let res = new DOMParser().parseFromString(html, "text/xml");

document.getElementById("result").appendChild(res);

});

希望有幫助

反對回復 2023-02-24

SMILET

TA貢獻1796條經驗獲得超4個贊

我已將其刪除innerHTML并替換為insertAdjacentHTML.

因為似乎在第一次刷新后innerHTML重置/忘記了，所以無法再檢測到觸發下一次刷新。#paginate#resultobserver#paginate#result

我本可以使用innerHTMLwithappendChild來做同樣的事情，但每次刷新appendChild都會添加一個新的，我不太喜歡。div#result

作為解決方案，我html在開始之前插入刷新的數據#paginate而不重置/忘記它是觸發下一次刷新id所需的元素。observer#result

.then((html) => {
paginate.insertAdjacentHTML('beforebegin', html);
});

反對回復 2023-02-24

4 回答
0 關注
265 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Intersectionobserver 和 InnerHTML 的無限滾動

使用 Intersectionobserver 和 InnerHTML 的無限滾動

4 回答

添加回答