Add element before scroll position, and not affect current scroll / view

Question

I'm trying to achieve the behaviour – for example – the Twitter Mac client:

I got a box I can scroll in (overflow Y, fixed height), and I got several blocks inside. I want to add a new block before all others, but make it invisible to the user: so when there's a new block added before, user have to scroll to the top to view it.

How would you achieve this? (JS powered of course, but must be touch-devices ready, and iP* do not run JS while scrolling).

Thanks!

Answer 1

I tried out changing the scrollTop after the element is added, and it seems to work fine on Chrome. You would have to check it out in other browsers.

$(document).scrollTop($(document).scrollTop() + elmHeight);

http://jsfiddle.net/ub5BU/