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?

Google+ does this already. Just try scrolling down on a popular search like https://plus.google.com/s/a in their feed. New items will be added to the top of your page seamlessly without changing your scroll position. It looks like they're using a combination of fake scrollbar, fixed positioning and offset for this, although I haven't had time yet to sort through the mass of containers on the page to confirm exactly how they accomplished it. — Karl Horky, Mar 07 '13 at 18:06

score 2 · Answer 1 · answered Dec 02 '17 at 23:37

Before executing the code to create your 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 this...

score 2 · Answer 2 · answered Sep 09 '20 at 08:44

In my case layout was something like this:

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

By clicking on button I want fetch data from server, dynamically create product cards with that data and add this cards to .list
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.
To solve this problem I just add something like document.activeElement.blur() before add cards to the DOM and all was fine.

score 1 · Answer 3 · answered Dec 12 '11 at 16:06

1

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

answered Dec 12 '11 at 16:06

Viruzzo

3,025
13
13

1

The problem is that this actually involves scrolling twice then because the content is moved down and then moved back. I'm looking for something that (preferably) doesn't require a redraw – jcuenod Dec 12 '11 at 16:10

score 1 · Accepted Answer · answered Dec 12 '11 at 16:35

1

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.

answered Dec 12 '11 at 16:35

Mike Christensen

88,082
50
208
326

I had been thinking of something like this, I was just hoping that there would be some mysterious document.prepend or something... – jcuenod Dec 12 '11 at 17:15
Yea not that I know of. Any time you have the browser do the layout for you, inserting elements into the DOM is gonna mess with your scroll position and you'll run into the re-draw problem. Maybe this is why no one does negative-infinite-scroll? :) – Mike Christensen Dec 12 '11 at 17:24
@j3frea - I just noticed Facebook actually implements this when you're looking at a long message thread and scroll up towards the top.. And there's no jumping or jerkiness with the scroll position. I guess you can try to reverse engineer how they did it :) – Mike Christensen Dec 13 '11 at 03:21

score 0 · Answer 5 · answered Jul 21 '22 at 04:58

0

I solved it by saving the first element of the container in a variable and then after inserting I called "scrollIntoView" on it. Looks smooth to me.

answered Jul 21 '22 at 04:58

Leonardo

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 22 '22 at 08:47

Insert content at top of page without scrolling

5 Answers5