Infinite Scrolling

Infinite scrolling is a Web design technique that prevents a browser scroll bar from reaching the bottom of the page, which means that you can have all of your Tumblr’s content displayed on a single page. This enables your Tumblr to grow without the need for additional pages to display content.

Overlap Errors

Improperly coded infinite scrolling usually results in errors in which images overlap. On Tumblr blogs with many pictures, the overlapping images can consume the view of the page, seriously affecting the functionality of your Tumblr and potentially causing you to lose followers whose tolerance for overlapping is limited.

Replacement Code and Additional Tags

By entering the following infinite code and tags, you can repair the issue while retaining infinite scroll capability. First, remove all infinite or endless scroll codes from your Tumblr’s HTML, and then enter the following code segment just before the “” tag at the end of your HTML code:

After that, enter the following code segment before the “</block:posts>” tag:

Add a "
" tag after the "" tag to complete the infinite scrolling script. Your page should now scroll infinitely without overlapping issues.

Considerations

Before implementing infinite scrolling on your blog, consider whether or not you really need this feature. Infinite scrolling is a function of JavaScript, a programming language used to implement many features in Web design. While useful, using large amounts of JavaScript on a single page – or Tumblr blog – can result in diminished performance and increased load times. Infinite scrolling may also prove cumbersome if you don’t emphasize photo content on your blog, in which case a different post arrangement may better suit your needs.

How to Get Rid of Overlapping on Tumblr - 66