Make Infinite Scroll With Svelte and Tailwind
Published: April 30, 2024
In this blog post, let's explore how we can build an infinitely scrolling HTML element using Svelte and Tailwind.
First, let's create a div element with a fixed height and with and overflowing content below.
Using below code, we can check how much further the user can scroll in the container. We put it in the top-right corner of the container as seen above.
<script>
let container;
function getScroll() {
scrollableHeight = container.scrollHeight - (container.scrollTop + container.clientHeight);
}
</script>
<div class="relative">
<p class="absolute">{scrollableHeight}</p>
<div bind:this={container} on:scroll={getScroll}>
<img src="Doggie1.jpg"/>
<img src="Doggie2.jpg"/>
<img src="Doggie3.jpg"/>
</div>
</div>
Let's make things interesting. Now that we can track, how many more pixels the user can scroll (scrollableHeight), we can check whether the user has scrolled all available content.
When all content is scrolled, we make a call to the image API, and get new image. While new image is loading, let's be nice and show the loading sign to the user.
Below is the infinitely scrollable HTML element. When all dog pictures are seen, we make a call to the Dog Pic API and get a new image.
This new image is obtained from API, loaded, and appended to the container. While these happen, we disable making new calls to the API.
Below is the code:
<script>
let fetchingImage; // Variable that checks whether image is being fetched
let tolerance = 5; // Detect the end of content when 5px close to the end
let image = new Image(); // Initialize image
// Initialize first 3 images
let sources = [
'https://images.dog.ceo/breeds/sheepdog-english/n02105641_3540.jpg',
'https://images.dog.ceo/breeds/husky/n02110185_7936.jpg',
'https://images.dog.ceo/breeds/terrier-lakeland/n02095570_3224.jpg'
];
// Map image links to HTML img elements
images = sources.map((src) => {
img = image.cloneNode(true);
img.src = src;
return img.outerHTML;
});
async function handleScroll() {
if (!fetchingImage && container.scrollTop + container.clientHeight > container.scrollHeight - tolerance) {
fetchingImage = true;
let response = await fetch('https://dog.ceo/api/breeds/image/random'); // Make a call to the API
let doggie = await response.json();
img = image.cloneNode(true);
img.onload = function () { // Wait until image is loaded
fetchingImage = false; // Check when the image is loaded
};
// Assign link obtained from API as src
img.src = doggie.message;
// Add new image to the images array. This array populates the container
images = [...images, img.outerHTML];
}
}
</script>
<div class="relative">
<div bind:this={container} on:scroll={handleScroll}>
{#each images as img}
{@html img}
{/each}
{#if fetchingImage}
<LoadingIcon />
{/if}
</div>
</div>
With above code, we can create below container, with infinite scroll. When you reach to the bottom of the container, an API call is made and a new dog picture is added. So you can scroll infinitely looking at dog pictures. Sounds like heaven right?
Let me know if you have any questions.
Happy hacking!
Leave comment
Comments
Check out other blog posts
2024/06/19
Create A Simple and Dynamic Tooltip With Svelte and JavaScript
2024/06/17
Create an Interactive Map of Tokyo with JavaScript
2024/06/14
How to Easily Fix Japanese Character Issue in Matplotlib
2024/06/13
Book Review | Talking to Strangers: What We Should Know about the People We Don't Know by Malcolm Gladwell
2024/06/07
Most Commonly Used 3,000 Kanjis in Japanese
2024/06/07
Replace With Regex Using VSCode
2024/06/06
Do Not Use Readable Store in Svelte
2024/06/05
Increase Website Load Speed by Compressing Data with Gzip and Pako
2024/05/31
Find the Word the Mouse is Pointing to on a Webpage with JavaScript
2024/05/29
Create an Interactive Map with Svelte using SVG
2024/05/28
Book Review | Originals: How Non-Conformists Move the World by Adam Grant & Sheryl Sandberg
2024/05/27
How to Algorithmically Solve Sudoku Using Javascript
2024/05/26
How I Increased Traffic to my Website by 10x in a Month
2024/05/24
Life is Like Cycling
2024/05/19
Generate a Complete Sudoku Grid with Backtracking Algorithm in JavaScript
2024/05/16
Why Tailwind is Amazing and How It Makes Web Dev a Breeze
2024/05/15
Generate Sitemap Automatically with Git Hooks Using Python
2024/05/14
Book Review | Range: Why Generalists Triumph in a Specialized World by David Epstein
2024/05/13
What is Svelte and SvelteKit?
2024/05/12
Internationalization with SvelteKit (Multiple Language Support)
2024/05/11
Reduce Svelte Deploy Time With Caching
2024/05/10
Lazy Load Content With Svelte and Intersection Oberver
2024/05/10
Find the Optimal Stock Portfolio with a Genetic Algorithm
2024/05/09
Convert ShapeFile To SVG With Python
2024/05/08
Reactivity In Svelte: Variables, Binding, and Key Function
2024/05/07
Book Review | The Art Of War by Sun Tzu
2024/05/06
Specialists Are Dead. Long Live Generalists!
2024/05/03
Analyze Voter Behavior in Turkish Elections with Python
2024/05/01
Create Turkish Voter Profile Database With Web Scraping
2024/04/29
How I Reached Japanese Proficiency In Under A Year
2024/04/25
Use-ready Website Template With Svelte and Tailwind
2024/01/29
Lazy Engineers Make Lousy Products
2024/01/28
On Greatness
2024/01/28
Converting PDF to PNG on a MacBook
2023/12/31
Recapping 2023: Compilation of 24 books read
2023/12/30
Create a Photo Collage with Python PIL
2024/01/09
Detect Device & Browser of Visitors to Your Website
2024/01/19
Anatomy of a ChatGPT Response