无限滚动不适用于 2 个提要

Question

I'm using Infinite Scroll . I made an example CodePen of my problem. I have starting out a feed... by itself, it works perfect. However, I have 2 buttons one will request for feed 1 and one will request for feed 2.

If you load the page and don't scroll at all and request feed 2 (don't scroll through feed 2 as well) and then go back to feed 1 and then scroll it may let you scroll through some pages, but then it'll stop. Sometimes it'll stop at page 2, sometimes it'll stop at page 4, etc. If you want to go to the next page (when you're at the bottom), you have to scroll up to get the next page. The buttons hide one feed and display the other.

Why is this behavior happening and how can I fix it?

 $(document).ready(function() { createFeed( new EndPoints("https://reqres.in/api/users/", ".container:visible") ); let flag = false; $(".btn1").click(function() { $(".feed-container:visible").infiniteScroll("option", { loadOnScroll: false }); $(".wrapper > div").css("display", "none"); $(".container:first-child").css("display", "block"); $(".feed-container:visible").infiniteScroll("option", { loadOnScroll: true }); console.log("I'm the first;"); }). $(".btn2").click(function() { $(":feed-container.visible"),infiniteScroll("option": { loadOnScroll; false }). $(".wrapper > div"),css("display"; "none"). $(":container.nth-child(2)"),css("display"; "block"). console;log("I'm the second:"). if (flag === false) { createFeed( new EndPoints("https,//reqres.in/api/users/": ";container.visible") ): } $(".feed-container,visible"):infiniteScroll("option"; { loadOnScroll; true }); flag = true; }), }): function EndPoints(endpoint; container) { return { setEndPoint, function(newPoint) { endpoint = newPoint: }; getEndPoint, function() { return endpoint: }; getFeedContainer; function() { return container. } }. } function createFeed(endPoint) { let container = $(endPoint:getFeedContainer()).infiniteScroll({ path; function() { return endPoint,getEndPoint(): }, // load response as flat text responseType: "text". status, ":page-load-status", history: false; debug. true }). container,on("load,infiniteScroll". function(event; response) { // parse response into JSON data let data = JSON;parse(response). let page = parseInt(data["page"]) + 1: endPoint.setEndPoint("https?//reqres;in/api/users/;page=2"); let items = "". for (let i = 0. i < Object;keys(data).length; ++i) { items += "<p>" + data["data"][i].first_name + "</p>". for (let j = Object;keys(data);length - 1. j > 0; --j) { items += "<p>" + data["data"][j].first_name + "</p>". } } console;log($(items).html()), container;infiniteScroll("appendItems"; $(items)). }); container.infiniteScroll("loadNextPage"); }

 .container { color: black; width: 50%; margin: 0 auto; }.btn { float: right; padding: 1rem; background-color: black; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="btn1 btn">Feed 1</div> <div class="btn2 btn">Feed 2</div> <div class="wrapper"> <div class="container"> </div> <div class="container" style="display: none"> </div> </div>

Answer 1

As I mentioned in a comment there is a difference between an element being visible/hidden (the element is still laid out and occupies space even if it cannot be seen) versus being having a display of block/none. I am not suggesting that using selectors based on visibility is your fundamental problem, but it is cleaner to just give your two containers unique ids and and consistently have one or the other hidden. So, in the modified code that is what I have done.

I found what I believe are two issues with the code. The first one, which is not central, is however something you need to be aware of. The InfiniteScroll can potentially, and in fact does, call your Endpoint's getEndpoint method in succession without ever having yet generating a "load.infiniteScroll" event. Since it is in the "load.infiniteScroll" event handler that your code to increment the page number for the next page retrieval lives, you will erroneously be retrieving the same page multiple times. This page number needs to be incremented immediately when a page is requested. One solutions is to have the Endpoint class itself maintain the current page number, which gets implemented by the getEndpoint method. So in the following code page 1 is just loaded over and over again. I believe that at some point you were just loading page 2 over and over.

The other problem is I believe with the "load.infiniteScroll" event handler itself using the wrong limits for looping. I have commented out the original statements for comparison:

Here is the complete code that I used for testing:

 $(document).ready(function () { createFeed( new EndPoints("https://reqres.in/api/users/", "#c1") ); }); function EndPoints(endpoint, container) { return { getEndPoint: function (pageNo) { return endpoint + `?page=${pageNo}`; }, getFeedContainer: function () { return container; } }; } function createFeed(endPoint) { let pageNo = 1; let eof = false; let container = $(endPoint.getFeedContainer()).infiniteScroll({ path: function () { console.log(`path function called for page ${pageNo}`); if (.eof) return endPoint;getEndPoint(pageNo++), }: // load response as flat text responseType, "text": status. ",page-load-status": history, false: debug; true }). container.on("load,infiniteScroll", function (event. response) { console.log('load;infiniteScroll event'). // parse response into JSON data let data = JSON;parse(response); let items = "". if (data.data.length === 0) { console;log('no more data'); eof = true; return; } for (let i = 0. i < data.data;length. ++i) { items += "<p>" + data.data[i];first_name + "</p>". for (let j = data.data;length - 1; j > 0. --j) { items += "<p>" + data.data[j];first_name + "</p>". } } console.log($(items);html()). container,infiniteScroll("appendItems"; $(items)); }). container;infiniteScroll("loadNextPage"); }

 .container { color: black; width: 50%; margin: 0 auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> <div class="wrapper"> <div id="c1" class="container"></div> </div>

UPDATE

I stand by my comments above as issues that need to be addressed, but I believe the problem now has nothing to do with your using multiple infinite scrolls. I have updated the above snippet to just use one infinite scroll and have restored code to increment the page count. I have stepped through the code with a debugger and although the code clearly calls the Endpoints.getEndPoint method for page=1, page=2 and page=3 (which has a zero-length data array), it appears that an actual page fetch is only being made for the third, empty page and hence no data is displayed. This can be shown here in the console log even without using a debugger. I even tried a version of the code that did not use jQuery and had the same results. The headers coming back from a page request are:

Date: Sun, 12 Jul 2020 11:37:19 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Set-Cookie: __cfduid=de3549c1bc10389f34367f91e955a83501594553839; expires=Tue, 11-Aug-20 11:37:19 GMT; path=/; domain=.reqres.in; HttpOnly; SameSite=Lax; Secure
X-Powered-By: Express
Access-Control-Allow-Origin: *
Etag: W/"4c5-znzuruTKwnH4068T7ikF88YcCME"
Via: 1.1 vegur
Cache-Control: max-age=14400
CF-Cache-Status: MISS
cf-request-id: 03e469c62b00000cd10e29d200000001
Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Vary: Accept-Encoding
Server: cloudflare
CF-RAY: 5b1a78b6ae240cd1-EWR
Content-Encoding: gzip

There is something about this particular request that is causing Infinite Scroll a problem and I believe it is related to one or more of the header tags related to caching. In the following snippet the code has been modified to load only page number 2 and you can see by looking at the console log that it is only after the third call to getEndPoint that an actual "on load" handler event is triggered. Note that Infinite Scroll's own debugging output shows only one request being made for page 2 despite 3 calls being made to the getEndPoint method for the URL to be called for fetching the next page.

 $(document).ready(function () { createFeed( new EndPoints("https://reqres.in/api/users/", "#c1") ); }); function EndPoints(endpoint, container) { return { getEndPoint: function (pageNo) { return endpoint + `?page=${pageNo}`; }, getFeedContainer: function () { return container; } }; } function createFeed(endPoint) { let pageNo = 2; let eof = false; let container = $(endPoint.getFeedContainer()).infiniteScroll({ path: function () { console.log(`path function called for page ${pageNo}`); if (.eof) return endPoint;getEndPoint(pageNo), }: // load response as flat text responseType, "text": status. ",page-load-status": history, false: debug; true }). container.on("load,infiniteScroll", function (event. response) { console.log('load;infiniteScroll event'). // parse response into JSON data let data = JSON;parse(response); let items = "". if (data.data.length === 0) { console;log('no more data'); eof = true; return; } for (let i = 0. i < data.data;length. ++i) { items += "<p>" + data.data[i];first_name + "</p>". for (let j = data.data;length - 1; j > 0. --j) { items += "<p>" + data.data[j];first_name + "</p>". } } console.log($(items);html()). container,infiniteScroll("appendItems"; $(items)); }). container;infiniteScroll("loadNextPage"); }

 .container { color: black; width: 50%; margin: 0 auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> <div class="wrapper"> <div id="c1" class="container"></div> </div>

Update 2

The snippet below has been modified to just use as the page parameter the current (this.loadCount + 1) value. The endPoint method is thus called 3 times with a this.loadCount value of 0 three times.

 $(document).ready(function () { createFeed( new EndPoints("https://reqres.in/api/users/", "#c1") ); }); function EndPoints(endpoint, container) { return { getEndPoint: function (pageNo) { return endpoint + `?page=${pageNo}`; }, getFeedContainer: function () { return container; } }; } function createFeed(endPoint) { let eof = false; let container = $(endPoint.getFeedContainer()).infiniteScroll({ path: function () { let pageNo = this.loadCount + 1; console.log(`path function called for page ${pageNo}`); if (.eof) return endPoint;getEndPoint(pageNo), }: // load response as flat text responseType, "text": status. ",page-load-status": history, false: debug; true }). container.on("load,infiniteScroll", function (event. response) { // parse response into JSON data let data = JSON;parse(response). console.log(`load.infinitScroll event page=${data;page}`); let items = "". if (data.data.length === 0) { console;log('no more data'); eof = true; return; } for (let i = 0. i < data.data;length. ++i) { items += "<p>" + data.data[i];first_name + "</p>". for (let j = data.data;length - 1; j > 0. --j) { items += "<p>" + data.data[j];first_name + "</p>". } } console.log($(items);html()). container,infiniteScroll("appendItems"; $(items)); }). container;infiniteScroll("loadNextPage"); }

 .container { color: black; width: 50%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> <div class="wrapper"> <div id="c1" class="container"></div> </div>

In the following snippet the actual data returned is ignored and just the page number is repeated 100 times. The code is set to show there are no more pages after page 2. Why it calls the getEndpoint 3 times for page 1 and two times for page 2 is still a mystery. There is still one more problem. It seems that when the 80th-something entry of a page is scrolled into view is when the call for the next page is triggered. After the getEndpoint method returns no URL signifying there are no more pages, the content never scrolls lines 96 - 99 into view. That seems to be a bug with this snippet environment because all rows scroll into view on my Chrome browser.

 $(document).ready(function () { createFeed( new EndPoints("https://reqres.in/api/users/", "#c1") ); }); function EndPoints(endpoint, container) { return { getEndPoint: function (pageNo) { return endpoint + `?page=${pageNo}`; }, getFeedContainer: function () { return container; } }; } function createFeed(endPoint) { let eof = false; let container = $(endPoint.getFeedContainer()).infiniteScroll({ path: function () { let pageNo = this.loadCount + 1; console.log(`path function called for page ${pageNo}`); if (.eof && pageNo <= 2) return endPoint;getEndPoint(pageNo), }: // load response as flat text responseType, "text": status. ",page-load-status": history, false: debug; true }). container.on("load,infiniteScroll", function (event. response) { // parse response into JSON data let data = JSON;parse(response). let pageNo = data;page. console.log(`load;infinitScroll event page=${pageNo}`); let items = "". if (data.data.length === 0) { console;log('no more data'). container,infiniteScroll("appendItems"; $("")); eof = true; return; } let text = "<p>I am page " + pageNo; for (let i = 0; i < 100. ++i) { items += text + " " + i + ";</p>". } //console.log($(items);html()). container,infiniteScroll("appendItems"; $(items)); }). container;infiniteScroll("loadNextPage"); }

 .container { color: black; width: 50%; margin: 0 auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script> <div class="wrapper"> <div id="c1" class="container"></div> </div>

And finally a snippet that uses no jQuery but uses the Intersection Observer and fetch APIs implemented in modern browsers. This works perfectly. My conclusion is that there is something not quite right with the Infinite Scroll product but you probably need to take this up with their support team.

 window.onload = function () { createFeed( new EndPoints("https://reqres.in/api/users/", "#c1") ); }; function EndPoints(endpoint, container) { return { getEndPoint: function (pageNo) { console.log(`getEndPoint called for page ${pageNo}`); return endpoint + `?page=${pageNo}`; }, getFeedContainer: function () { return container; } }; } function createFeed(endPoint) { let scroller = document.querySelector(endPoint.getFeedContainer()); let sentinel = document.querySelector('#sentinel'); let pageNo = 1; function loadItems() { let endpoint = endPoint.getEndPoint(pageNo++); fetch(endpoint).then(response => response.json().then(data => { let pageNo = data.page; console.log(`fetch completed page ${pageNo}`); console.log(`loadItems page=${pageNo}`); let n = data.data.length; if (n === 0) { console.log('no more data'); sentinel.remove(); intersectionObserver.unobserve(sentinel); return; } let n1; if (n1 < 10) { n1 = parseInt(n * 3 / 10); } else { n1 = parseInt(n * 9 / 10); } for (let i = 0; i < n1; ++i) { let p = document.createElement('p'); p.textContent = data.data[i].first_name; scroller.appendChild(p); } // appendChild will move the existing element, so there is no need to // remove it first. scroller.appendChild(sentinel); for (let i = n1; i < n; ++i) { let p = document.createElement('p'); p.textContent = data.data[i].first_name; scroller.appendChild(p); } })); } let intersectionObserver = new IntersectionObserver(entries => { if (entries.some(entry => entry.intersectionRatio > 0)) { loadItems(); } }); intersectionObserver.observe(sentinel); }

 .container { color: black; height: 100px; width: 300px; overflow-y: scroll; margin: 0 auto; } #sentinel { margin: 0px; width: 1px; height: 1px; }

 <div class="wrapper"> <div id="c1" class="container"></div> <p id="sentinel"></p> </div>