astro-podcast website. How to make more episodes keep showing up as you scroll
How can I implement this effect:
Eg: https://hubermanlab.com/
(The podcast episodes keep showing up as you scroll.)
The Spotify api fetches only 20 episodes.
Huberman Lab
Huberman Lab
The Huberman Lab podcast discusses science and science-based tools for everyday life. New episodes are released every Monday.
5 Replies
it's called an infinite scroll, you'll want to use the Intersection Observer API to detect when the user is at the bottom and then load more items and insert them into the DOM
Intersection Observer API - Web APIs | MDN
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
https://codepen.io/Sup-the-builder/pen/eYQxPjL?editors=1010
in this i want to apply inifinite scrolling, ihave app.js(api call) and episode.astro(index of episodes)
its fetching the episodes in the console but i cant make it appear on the frontend
how to append
considering Astro is mostly SSR, I think you may have to do it manually using vanilla JS
You can use the cloneNode method to get a copy of an element, then adjust the contents as needed. You can also take a look at the template element to store an easily reused copy of the element you need to clone