How do you make an infinite scroll page in Blogger?

Question

I have a blog and would like to make it infinite scroll so you don't have to click through pages and pages of posts. Can anyone help me with the code, its in HTML according to Blogger? Thanks :-)

Answer 1

How to add infinite scrolling to Blogger blogs

Recently I read an interesting article, How to add infinite scrolling to Blogger blogs. If you are using Blogger's blog, you can follow the instructions and give your blog, an infinite scroll without much hassle.

The code for the widget is available on Google Code. Feel free to copy or adapt the code.

From their website, a few points worth mentioning:

• This code uses jQuery library, so don’t forget to include it.
• Custom template blogs may have to change the value of postContainerSelector variable in the code.
• You have manually added +1 buttons to my blog. Dynamically loaded posts won’t have the +1 buttons initialised; to fix that issue, I had to call gapi.plusone.go() every time new posts are added to the page.
• _WidgetManager is a JavaScript object present in Blogger blogs. You can query this object to find some page metadata. This code uses _WidgetManager to determine if the current page is showing a single post. Infinite scrolling is not meaningful when only a single post needs to be displayed.

Answer 2

HTML has no way of achieving this, you need JavaScript.

First set up an event listener for the scroll event. When it fires compare the distance scrolled to the height of the document and window.

If that indicates you are near the document, use XMLHttpRequest to download more content, and then the usual DOM suspects to add that content to the page.