Skip to content
Advertisement

Insert content at top of page without scrolling

Is there a way that I can insert content at the beginning of a webpage without causing the page to give the impression of scrolling up.

I’m trying to implement something kind of like infinite scrolling but I need to be able to scroll up infinitely as well as down (I’m also unloading content on the other end so that the scroll bar doesn’t become infinitesimal and the app doesn’t take up too much memory).

I’m happy to use javascript, I’d rather not use a library (I’m trying to stay lighter weight than that).

Any ideas?

Advertisement

Answer

One possible idea is to bypass the scroll mechanism completely and do your own.

Basically, position every element with display: fixed. You can then load elements above the screen using negative positions.

You’ll have to sync the height of the document (just by adding white space) so the document scrollbars are correct. Then, you trap the scroll event and adjust the fixed positioning of all the elements within your page.

I’m not sure how smooth it will be, but I’m fairly certain you could get the effect you’re looking for.

Advertisement