Infinite scroll is a popular design pattern that allows users to continuously load more content as they reach the end of a page, rather than having to click to go to another page. This smooth and seamless experience can be particularly useful for blogs, social media feeds, or image galleries. In this article, we\u2019ll walk through building a basic infinite scroll with JavaScript and an API.<\/p>\n\n\n\n
Infinite scroll enhances user engagement by loading content in a continuous stream. When implemented properly, infinite scroll can improve both the user experience and retention by keeping visitors engaged with fresh content.<\/p>\n\n\n\n
We\u2019ll use JavaScript to monitor when the user scrolls to the bottom of the page and then trigger a function that fetches additional content from an API. Here\u2019s what you\u2019ll need:<\/p>\n\n\n\n
Let\u2019s start by creating a simple HTML structure for displaying content and a loading indicator:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Infinite Scroll Demo<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div id=\"content-container\"><\/div>\n <div id=\"loading\">Loading...<\/div>\n \n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\n- #content-container<\/strong>: This div will hold all the content fetched from the API.<\/li>\n\n\n\n
- #loading<\/strong>: This div appears at the bottom of the page while new data is being fetched.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nStep 2: CSS for Styling<\/strong><\/h3>\n\n\n\nHere\u2019s some basic styling for the container and loading indicator:<\/p>\n\n\n\n
\/* styles.css *\/\n\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n}\n\n#content-container {\n max-width: 600px;\n margin: 20px auto;\n padding: 10px;\n}\n\n#loading {\n text-align: center;\n padding: 20px;\n font-size: 1.2em;\n display: none; \/* Initially hidden *\/\n}\n<\/code><\/pre>\n\n\n\nThe #loading<\/code> div will display when we\u2019re fetching new data.<\/p>\n\n\n\n
\n\n\n\nStep 3: Fetch Data with JavaScript<\/strong><\/h3>\n\n\n\nLet\u2019s set up JavaScript to fetch data from a placeholder API like JSONPlaceholder. We\u2019ll create a function called fetchData()<\/code> that retrieves data and appends it to the content container.<\/p>\n\n\n\n\/\/ script.js\n\nlet page = 1; \/\/ Start on page 1\n\nasync function fetchData() {\n document.getElementById('loading').style.display = 'block';\n \n try {\n const response = await fetch(`https:\/\/jsonplaceholder.typicode.com\/posts?_page=${page}&_limit=5`);\n const data = await response.json();\n \n data.forEach(item => {\n const post = document.createElement('div');\n post.classList.add('post');\n post.innerHTML = `\n <h2>${item.title}<\/h2>\n <p>${item.body}<\/p>\n `;\n document.getElementById('content-container').appendChild(post);\n });\n\n page++; \/\/ Increase page count after loading data\n } catch (error) {\n console.error('Error fetching data:', error);\n }\n\n document.getElementById('loading').style.display = 'none';\n}\n<\/code><\/pre>\n\n\n\n\n- fetchData()<\/strong>: Fetches a limited number of posts (5 here) from the JSONPlaceholder API for each page.<\/li>\n<\/ul>\n\n\n\n
\n\n\n\nStep 4: Adding Infinite Scroll<\/strong><\/h3>\n\n\n\nNow, we\u2019ll add an event listener to detect when the user scrolls near the bottom of the page. When that happens, fetchData()<\/code> will be called to load additional data.<\/p>\n\n\n\n\/\/ Infinite scroll event listener\nwindow.addEventListener('scroll', () => {\n const { scrollTop, scrollHeight, clientHeight } = document.documentElement;\n\n if (scrollTop + clientHeight >= scrollHeight - 5) {\n fetchData();\n }\n});\n\n\/\/ Initial fetch for first set of data\nfetchData();\n<\/code><\/pre>\n\n\n\n\n- scrollTop<\/strong>: How far the user has scrolled.<\/li>\n\n\n\n
- clientHeight<\/strong>: Visible height of the viewport.<\/li>\n\n\n\n
- scrollHeight<\/strong>: Total height of the page.<\/li>\n<\/ul>\n\n\n\n
When scrollTop + clientHeight<\/code> is close to scrollHeight<\/code>, it\u2019s time to load more data. We then call fetchData()<\/code> again, which loads new posts.<\/p>\n\n\n\n
\n\n\n\nStep 5: Add Loading Indicator<\/strong><\/h3>\n\n\n\nTo improve the user experience, we\u2019ve included a loading indicator. This will show up while new data is being fetched:<\/p>\n\n\n\n
\n- We set
#loading<\/code> to display: block<\/code> when data fetch begins.<\/li>\n\n\n\n- After the data is appended, we hide
#loading<\/code> again.<\/li>\n<\/ol>\n\n\n\n
\n\n\n\nComplete Code<\/strong><\/h3>\n\n\n\nHTML<\/strong>:<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Infinite Scroll Demo<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <div id=\"content-container\"><\/div>\n <div id=\"loading\">Loading...<\/div>\n \n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\nCSS<\/strong>:<\/p>\n\n\n\n\/* styles.css *\/\n\nbody {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n}\n\n#content-container {\n max-width: 600px;\n margin: 20px auto;\n padding: 10px;\n}\n\n#loading {\n text-align: center;\n padding: 20px;\n font-size: 1.2em;\n display: none; \/* Initially hidden *\/\n}\n\n.post {\n margin-bottom: 20px;\n padding: 15px;\n border: 1px solid #ddd;\n border-radius: 8px;\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);\n}\n\n.post h2 {\n margin: 0 0 10px;\n}\n\n.post p {\n margin: 0;\n}\n<\/code><\/pre>\n\n\n\n