Skip Navigation

[Resolved] infinite scrolling is very unreliable

This support ticket is created 5 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 6 replies, has 2 voices.

Last updated by Luo Yang 5 years, 2 months ago.

Assisted by: Luo Yang.

Author
Posts
#1368269

Hi, I have set up a page that uses infinite scrolling:

I am preloading 3 pages, with 100ms delay and a tolerance of 3500 px.
Yet when I reach the bottom of the page it sometimes takes 2-3 seconds for infinite scrolling to kick in. Sometimes it shows the preloader (on mobile only) and sometimes it does not.

By now I have tried it on several configurations with multiple themes, divi, elementor hello, padma, headway etc, all having the same issue.

Is infinite scroll an abandoned feature or is it supposed to actually work? In its current state, it is not useable in a practical environment as there is nothing to let the user know a page is loading, and when the page loads, it pushes the content upwards, since by then the user has already reached the footer.

If it is an actively maintained feature, can you advise on anything I may try to get this thing to work?

Thank you,

Adrian

The URL of the page in question is hidden link

#1368361
max-height.JPG

Hello,

I can see the problem you mentioned above:

it pushes the content upwards

It should be a CSS problem, since you have setup the "max-height" CSS attribute into that column:

[data-elementor-device-mode=desktop] .elementor-2771 .elementor-element.elementor-element-142e085 {
    max-height: calc(100vh - 60px);
...
}

it conducts the problem, I have tested it by removing that CSS style, it works fine, see screenshot: max-height.JPG

#1368373

Hi Luo,

I tried applying your changes and the result is the same.
I created a screen recording with the issue. As I scroll down, I reach the footer, nothing happens, then I have to scroll back up to see the content. The script is not triggering at the right time.

hidden link

#1368397

I have tested it again with Chrome and Firefox:
hidden link

It works fine, you can try to clear your browser cache or try with another browser, and test again.

#1369069

I tried it on several different computers (Windows, MacOS and iOS) and on all devices and 7 browsers, it suffers from the same issue that I recorded in the video. Would you be able to post a video recording on how it works on your browser?

#1369139

I just checked again and the issue is actually worse than that.
On the first scroll only, it replaces the first page content with the second page. which is why the content loads upwards and not downwards from the scroll position on the page (see the video I attached above). Essentially there is no way to get back to the first 12 articles after the user has scrolled down.

#1369565

Thanks for the details, I can see the problem as you mentioned above:
it replaces the first page content with the second page.

I have tried the infinite scrolling in my localhost, with a fresh wordpress installation + the latest version of Toolset plugins, there isn't the same problem.

So the problem is abnormal, please check these:
1) In case it is a compatibility problem, please deactivate all other plugins, and switch to wordpress default theme 2019, deactivate all custom PHP/JS code snippets, and test again

2) If the problem still persists, please provide database dump file(ZIP file) of your website, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/