How to Create Infinite Scroll Pagination using JavaScript

Infinite scroll pagination technique has gained immense popularity ever since social networking bigwigs Facebook and Twitter started using them. This technique lets users to explore vast amount of information by scrolling, without the need to wait for the entire content to load, thereby offering a great user experience and improving the loading speed. Instead of directing the user to navigate to a different page, this technique displays content as and when the user scrolls down.

This post aims to impart knowledge on how to implement infinite scrolling design technique using JavaScript and Ajax.

Read: How to Show a Preview of an Image Before Uploading it Using jQuery & JavaScript?

Step 1

First we need to find the display (viewport) height and the required container height (page content).

In the above image, the display height is 500px and container (page content) height is 700px;

To find display (viewport) height use below properties:

1. document.documentElement.clientHeight – Height of viewport without including the height of borders and toolbars.
2. window.innerHeight – Height of viewport without including borders and toolbars.
3. window.outerHeight – Height of viewport that includes borders and toolbars height.

To find required container height use the below property

1. offsetHeight – Total height of container including border and padding height.

Step 2

Now, we need to find hidden height. For that we need to subtract display height with container height.

From the above images the hidden height was found to be 200px.
This was how we landed on the value of hidden height:
Required Container Height = 700px
Display Height =500px
Hidden height = Required container height – display height.
Hidden height = 200px

Step 3

Then subtract the ‘Hidden Height’ value with 50px or 100px so that we can bind the next set of data before reaching bottom of the container (page content).In our case the pagination height was found to be 150px.

pagination_height = hidden height – 50px
pagination_height = 150px.

Next, use scroll event handler and find whether the scroll height is equal to hidden height. If it is equal then use Ajax to bind next set of data with the existing content.

Use the below syntax to find the scroll height

window.addEventListener(“scroll”,function(event) {
scrollHeight = this.scrollY;
if(scrollHeight == pagination_height) {
// use ajax to bind next sets of data
}
}

Use the JavaScript function appendChild() to bind the next set of data.

In the above example, we have taken the height of the whole page including the footer. To find the total height of container without including the footer, find page content height without the footer and add that value with offset top value of this container from body tag. By doing so, you will get the total height.

Consider a scenario, where you happen to do pagination on a container

<div class=”pagination”>

For that you need to find the total height of pagination div and add that value with offset top value of pagination div from body tag. By doing this you will be able to get the exact height.

Now by subtracting the display height (view port) with the exact height (container) you can find the hidden height.
The function getElementOffsetTopValue, will give you the offset top value of pagination div.

The syntax for which is given below:

function getElementOffsetTopValue(element) {
var actualTopValue = element.offsetTop;
var currentElement = element.offsetParent;
while (currentElement !== null) {
actualTopValue += currentElement.offsetTop;
currentElement = currentElement.offsetParent;
}
return actualTopValue;
}
topValue = getElementOffsetTopValue(element)

You can also use the below JavaScript function to get offset top value of pagination div

topValue = element.getBoundingClientRect().top
// We add that offset top value with total height of pagination div
totalHeight = topValue + element.offsetHeight
hidden height = totalHeight – 500(display height)

Finally, follow step 3 to load the next set of data. By the end of the post I hope you would have understood how to implement infinite scroll technique in your site. In case you feel I have missed out on something, do indicate it through your comments.

Realated Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">