Insert content at top of page without scrolling

Question

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?

Answer 1

In my case layout was something like this:

<div class='container'>
   <div class='list'>
      product cards...
   </div>
   <button>Load more</button>
</div>

1. By clicking on button I want fetch data from server, dynamically create product cards with that data and add this cards to .list
2. Problem was that when dynamically cards added to the DOM, screen automaticaly scroll and I see only last added cards, but not first added. I think its default behavior for all browsers (I may be wrong) - if content added in DOM above the focused element browser scroll page in order to focused element was on screen. If content added below the focused element scroll not happened and the focused element also on the screen.
3. To solve this problem I just add something like document.activeElement.blur() before add cards to the DOM and all was fine.

Answer 2

You can use window.scrollBy(x, y) to scroll down when you add content (you have to calculate the height of what you add).