Explanation of how the 'Threshold' value works for infinite scroll?

General
1

I’m currently setting up infinite scrolling for a single post page. A couple of things I’m noticing:

  • It preloads the page with 1 additional article already queried
  • It’s fairly aggressive on when to load the next article on scroll

Questions:

  • Is it possible to load the first queried post on scroll (instead of on first load of page)?
  • How do I set it so it only infinite loads the next post when at the bottom of previous?

Thanks!

2

Hello @Jason,

The Infinite Scroll threshold value has different behaviours depending on whether Frontend Rendering is active or not (we’ll try to make this clearer as it is clearly necessary).

When Frontend Rendering is toggled on, the threshold property bases itself on the Intersection Observer property by the same name:

A value of 1.0 means that the threshold isn’t considered passed until every pixel of the observed element is visible → Intersection Observer API - Web APIs | MDN

In the case of Infinite Scrolling without Frontend Rendering toggled on, the threshold is a reference to the viewport being < x from bottom of scroll area.

1 Like