Performant method of maintaining user's scroll position


Given a simple application that loads a list of messages (with new messages appearing in real time on the top of the list), what is the most performant method of maintaining the user’s scroll position?

I’ve built a simple demo application on JSBin, which shows a method that appears to perform well. However, when using an actual data source (Firebase in my case), there’s some updates that seem to flicker the page. @trek guesses that the flicker is “the brief time between render and the current runloop triggering the scrollto”.

To demo the application, simply click the “New Tweet” button a couple of times to generate a list of tweets long enough to warrant scrolling. Then, scroll down, and click the “New Tweet” button again to add a new element to the top of the list.