Infinite Scroll
Planted:
Status: decay
Hits: 450
An infinite scrolling page continually fetches more content as the user scrolls. Commonly used when the page's content is too big to handle in 1 request. For example, Pinterest's landing page. It displays a list of items that are paginated (grouped in batches of 40 for example). On page load, the 1st batch is displayed. As the user scrolls, but before they reach the bottom, a request is made to fetch the next batch. This continues until there are no more batches. This approach to loading content removes the need for a user action to see the next batch. For example, clicking the Next link at the bottom of a Google search.
1st Batch
To create an infinite scroll, we will pretend we have an endpoint that batches items in groups of 10.
Items will be rendered on the page in a vertical list.
The 1st batch will be hardcoded in HTML representing a server-side render.
In case the user scrolls fast enough to reach the bottom of the list before the next batch of results has been fetched,
an additional list item will be added with the text Loading....
Next Batch
To fetch more items, create an element we'll refer to as fetchTrigger within the <ul />.
Set:
- ▪
<ul />toposition: relative - ▪ fetchTrigger to
position: absolute,bottom: 0. Making it anchored to the bottom of the list.
Observe fetchTrigger using the Intersection Observer, set the following in the options object:
- ▪ omit the
rootproperty - ▪
threshold: 0
This sets the viewport as the root.
When 1px of fetchTrigger intersects it, a callback will be executed.
Create a function that fetches the next batch and adds it to the list.
Call it when the observer is triggered and isIntersecting: true.
The height of fetchTrigger will determine how far the user has to be from the bottom of the page to trigger a fetch.
Because it should not be seen or interacted with, set pointer-events: none and aria-hidden="true".
In the example above, it has a background color for demo purposes only.
Feedback
Have any feedback about this note or just want to comment on the state of the economy?
Where to next?
