Infinite Scrolling, also known as endless scrolling, is a technique that is widely used by websites and Web applications that host lots of content on a page where pagination would traditionally have been used. Infinite scrolling involves initially loading only one page of content. As the user scrolls down, the browser fetches another page via an AJAX request. There are several Infinite Scrolling plugins that facilitate this technique in modern browsers.
Background:
In Web 1.0 applications, it is common to see pagination used to limit the browser from displaying all of the data in a set all at once. Pagination allows a subset of the data to be displayed on the page, which reduces the memory footprint and decreases the lag-time caused by too much visible markup being displayed in the DOM.
Pagination involves "next" and "prev" links as controls in which a user uses to traverse through the data. This technique is facilitated through either full page reloads, where clicking next reloads the page with the next data subset, or it's facilitated through AJAX, where the application replaces a portion of the page with the next set of data.
Some Infinite Scrolling plugins, such as the Infinite Scrolling - A jQuery Plugin simply extend this type of pagination by hiding the "prev" and "next" hyperlinks and automating the click through process by monitoring the scrollTop position, while others do not.
Thus, for websites and web applications with an existing legacy pagination technique, a plugin that extends existing functionality may be more desirable.
Example of the Infinite Scrolling Technique:
An real-life example of the infinite scrolling technique is found here
Infinite scrolling plugins:
Below is a list of some widely known Infinite Scrolling plugins:
When should I use this tag?
You should use the [infinite-scroll] tag on questions where you know or reasonably believe through trial and error that the problem you're facing is related to an infinite scroll plugin or an infinite scroll technique.
For example, this question is asked by a user who was having problems getting the jQuery Infinite Scroll plugin to work. The error the user is seeing only appears when the plugin is loaded, which implies that the plugin is involved in the problem.
It's not helpful to tag a question with a tag that isn't specifically involved in the problem, so an example of a situation where I wouldn't use the tag would be if the Infinite Scroll plugin or technique was working great, yet I had problems making an AJAX call to the server. Additionally, the problem occurs with or without the plugin; therefore, I would not use that tag in this specific scenario.
Advanced Techniques:
The majority of the Infinite Scroll plugins that exist, in general, only offer one way scrolling functionality. In other words, as the user scrolls down, more content is added. However, in most cases, the content above the visible viewing area remains actively loaded in the DOM.
As users scroll down long enough, they may begin to experience a lag as more and more memory is consumed by the browser. With enough content, this could theoretically cause a browser crash.
Ben Nadel writes a blog post covering Bidirectional Infinite Scroll. While there is no demo, in the blog post, he includes a video that demonstrates the technique.
For Bidirectional Scroll, there exists no plug-in at this time, at least none that are easy to find. The bidirectional technique is much harder to implement than the one-way technique.
The difficulty comes not from implementing two directions per se, but instead the difficulty manifests itself when attempting to implement scrolling that loads content above the visible area, such as when the user scrolls up. When scrolling down, new content added to the page does not affect the visible viewing area. While users may see the scrollbar move, the content itself is not affected.
But when content is loaded on top, the visible scroll area shifts, and the user experiences a jarring effect. Ben Nadel's technique involves storing the scrollTop position prior to loading in new content on top, and then once the content loads, a new scrollTop is quickly calculated before the user experiences any side effects.
