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! 😉
