Infinite Scroll

From www.searchenginejournal.com

The front-end development is very interesting. Developers can design unique functions and features through imagination and different technologies. I love front-end development very much. Therefore, I spend time observing different websites, and they often divide the content into different pages. I think browsing a website by clicking on buttons or page numbers would possibly consume users’ patience.

I refer to some features from mobile phone applications, such as TikTok’s swipe up and down to watch different videos. I have an idea to automatically add the content of the next page when the user scrolls to the bottom of the page. That would provide a seamless user experience for a user to do fewer clicks and view more content.

First, we’re going to start with App.js. We need to initialize a state with feeds:[], page:1, and feedPerPage:20.

Then, we need to an event listener and check the user’s scroll. we need to use window.innerHeight which is a property used for returning the height of a window. and window.scrollY will return the number of pixels that a user is scrolled vertically. The document.body.offsetHeight will return the total scrollable height of a window. We can these three properties to determine whether a user reached the bottom of a web page.

In the displayFeeds function, I use the slice function to divide the content into pages. Every time a user reaches the bottom of the web page, the next page’s content will be added automatically.

Now whenever a user reaches the bottom of the web page, new content will be added automatically.

I have uploaded my code to the code sandbox. You can add custom code and come out with a more creative web page! 😉

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ZHENGJIAN LIU

ZHENGJIAN LIU

Software engineer experienced in Ruby on Rails, React, and Javascript based programming. zhengjianliu.com