How to Infinite Scroll in JavaScript
Infinite scrolling is a web design technique that continuously loads content as the user scrolls down the page. This will eliminate the need for pagination.
The success of endless scrolling on social networking sites like Twitter popularized this technique, but that doesn’t mean you should use it.
Continuous scrolling is beneficial for constantly streamed content and has a relatively flat structure, where each content unit belongs to the same hierarchy level and has similar chances of being interesting to users.
In today’s post, we’ll learn about infinite scrolling in JavaScript.
Infinite Scroll in JavaScript
The GlobalEventHandlers mixin’s onscroll property is an event handler that handles scroll events.
The Scroll event is raised when the document view or an element has been scrolled by the user, a web API, or the user agent.
Syntax:
target.onscroll = functionRef
The functionRef is a function name or function expression. The function takes a UIEvent object as its only argument.
You can only assign one onscroll handler to an object at a time.
If more than one handler is required, you can use the EventTarget.addEventListener() method instead and pass the scroll event to the listener. You can find more information about the window.onscroll here.
Let’s understand it using an example.
<body>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
</body>
var body = document.querySelector('body');
body.onscroll = function() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log('It\'s working!');
body.style.height = document.body.offsetHeight + 100 + 'px';
}
}
In the above example, we have defined 10 paragraph tag inside the body of the HTML DOM. Each time body is rendered and the user scrolls down, we check the number of pixels that the document is currently scrolled vertically.
If it’s greater than the height of the body and window height, we will append 100px to the current height of the body. Run the above code snippet in a browser that supports JavaScript; it will print the below result in the console.
Output:
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
....
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn