How to Implement a Perfect Infinite Scroll
Infinite scroll is very popular in web right now because it largely boosts user experience. Thus, I would like to share some tips on implementing a perfect infinite scroll.
Infinite scroll is user friendly, but may not be search engine friendly. We need to help crawlers to discover all the individual items after the first page is loaded. In order to achieve this, build a traditional pagination with page parameter in URL (e.g.,
example.com/items?page=1), and configure the previous page URL and the next page URL in the
<head> for each page to help scrawlers to navigate across the pages. For example, for
example.com/items?page=3, put the following in
<link rel="prev" href="/items?page=2"> <link rel="next" href="/items?page=4">
Infinite scroll helps users to navigate seamlessly, but it can be hard for users to refer back a certain position. Thus, it is recommended to use HTML5 history API to update the current page URL in browser address bar by calling
replaceState accordingly when user scrolls into a different page. In this way, the scrolling history is backed up in browser's history, and user can copy the URL from address bar for their own reference as well.