Paste content at the top of the page without scrolling

Question

Is there a way that I can insert content at the beginning of a web page without giving the impression of scrolling the page.

I'm trying to implement something like infinite scrolling, but I need to be able to scroll endlessly as well as down (I also unload the content on the other end so that the scrollbar does not become infinitely small and the application does not take up too much memory).

I am happy to use javascript, I would prefer not to use a library (I try to stay easier than that).

Any ideas?

Answer 1

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

Basically, position each element with display: fixed . Then you can load items above the screen using negative positions.

You will need to synchronize the height of the document (just by adding a space), so that the scrollbars of the document are correct. Then you capture the scroll event and adjust the fixed positioning of all the elements on your page.

I’m not sure how smooth it will be, but I’m sure that you can get the effect you are looking for.

Answer 2

You can use window.scrollBy(x, y) to scroll down with the addition of content (you need to calculate the height that you add).

Answer 3

Before executing the code to create the element, simply do something like this:

 var scrollY = window.scrollY; window.onscroll = function(){ window.scrollTo(0, scrollY); window.onscroll = null; }; 

Keep in mind that if you already have an onscroll function, you will need to reassign the function after that ...