

I did this using a small class called ScrollPosition: function ScrollPosition ( node ) Thus, before the content is added we effectively save the scrollTop (current scroll position) minus scrollHeight of the container to know how much it’s been expanded by the new content once added. Since KO automatically handles adding new DOM elements, it’s not as easy to actually get a reference to the new element to measure it.

Using plain DOM techniques, this effect could be accomplished by creating the new content, measuring its height ( scrollHeight), and then scrolling the parent container / viewport in the opposite direction that amount. The only real trick is partially due to using KnockoutJS (KO). Click the buttons to add content above and below, and see that new content does not affect the position of the existing content in the viewport: I setup a small test case to try this out using jsfiddle. once the new content has been added (possibly asynchronously), scroll in the opposite direction to compensateĪnd of course hope that you can do that between repaints of the browser so that the user doesn’t notice anything :).save the current scroll position and scrollHeight of the container.
