Infinite Scrolling with Lazy Loading in Javascript



Sometimes we came across an Infinite scrolling requirement or a lazy loading interview question that how can we find if scroll down to the end of the document or we want to fetch new data when the user reaches the bottom of the page. This kind of requirement some time found to be tricky or difficult to implement in core javascript for some developers like me.


But if we try to understand the concept of the scrolling with DOM it found effortlessly simple to everyone. We just need to listen to `EventListener` for `scroll`. But wait only scroll listener will not help us as it will listen by our action to infinite times and we don't want to fetch new data up to that extent.


Then how can we know where we need to hit our new data exactly or what is the logic to know we reached the end of our page. In this article, we will find the exact logic and post our new data at the end of the page.




In this above code snippet, you can see I have a simple HTML page which have a div with class='container' and have its child as div with class='post'. Also, this Html page has some CSS style in it.


To make our page scrollable I copy-paste Post'div up to five times as you can see in the above pic.


Now to capture the user event I have to add `scroll` event listener with callback function so that I can work with the scrolling event.


<script>window.addEventListener('scroll',function() {});</script>

Now to capture at what scrolling position currently we are and what is the maximum scrolling point we have we will take the help of the DOM object called `document`. In the `document` Object, we have `document.documentElement` which gives us values of the total height of the page, currentHeight, and the scrolled height by the user.


<script>
window.addEventListener('scroll',function() {
  var {scrollTop,scrollHeight,clientHeight} = document.documentElement;
  console.log({scrollTop,scrollHeight,clientHeight})
});
</script>


- scrollTop: It is the height which the user scrolled.

- scrollHeight: It is the total height of the page.

-clientHeight: It is the visible document height which I mentioned in the above pic.


Now we need to add scrollTop and clientHeight to identify if the user has scrolled down to scrollHeight of the page.



<script>
var container = document.getElementsByClassName("container")[0];
window.addEventListener('scroll',function() {

var {scrollTop,scrollHeight,clientHeight} = document.documentElement;

console.log({scrollTop,scrollHeight,clientHeight})
				
	if(scrollTop + clientHeight >= scrollHeight ){
		console.log(container.children.length)
		if(container.children.length <= 40){
			getPost();
			getPost();
			getPost();
		}
	}
});
			
function getPost(){
 var post = document.createElement('div');
 post.classList.add('post');
 post.innerHTML = ` <h3>Title of the post</h3>
		<p>As we know we are trying to mimic a blog post here so that we can load new post on page scrolling</p>
		<h6>Footer of the post</h6>`;
		
container.appendChild(post);
}
			
</script>

Now if our scrollTop + clientHeight reaches to scrollHeight then we can add new Post till it reaches the 40 length.



Thank you! ~Blio

16 views

Subscribe to Our Newsletter

© 2023 by BLIO

  • YouTube
  • Instagram
  • reddit-logo-newnew
  • medium-logo
  • LinkedIn
  • github-logo-new
  • Twitter
  • tiktok-logo-newnew
  • Facebook