It avoids the issues of infinite scrolling really well. What you do is have a very tall div, say 8 million pixels. Inside of that you add a div that you move around as the page scrolls, let's call it the viewport. Whenever there is a scroll event, you check and see if the viewport is no longer visible on the screen and then repopulate its contents.
This is indistinguishable from a very long page as far as the user is concerned. You can grab the scrollbar and jump halfway down. You can hit the "END" key and jump all the way to the end of the results. If you scroll faster than content can be loaded, scrolling doesn't suddenly stop when you reach the end of the loaded content, then have the content appear and have to start scrolling again.
The back and forward buttons work as expected, at least in all the browsers I've tried. Refresh does too. This doesn't require any extra work on my part. The browser goes back to the page and sets the scroll position correctly, which fires an onscroll event. This is then treated like a normal user scroll, which will cause the viewport to be moved and the necessary information to be drawn.
In my case it's a grid of square images so the math is straightforward. I load three extra rows above and below what is visible in the viewport.
Unfortunately, I don't have a demo available in a public place. I've implemented this in jquery, then again in ember, then again in react (as ember was too slow). I'm working on getting it working with the ember glimmer branch. If you're interested in looking at my broken code, it's at https://github.com/jewel/hypercheese.
If you are using infinite scroll to replace pagination, please consider using this technique.
Edit: SlickGrid has something they call "virtual scrolling" that appears to be using a similar technique. Here is a spreadsheet with 500,000 rows: http://mleibman.github.io/SlickGrid/examples/example-optimiz...