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?

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?

• javascript
• infinite-scroll

• 2 Google+ does this already. Just try scrolling down on a popular search like 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 Commented Mar 7, 2013 at 18:06

6 Answers 6

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...

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.

Instead of putting items on top of a container, you can put them on the bottom of a reverse container. The result will be visually the same.

To achieve that you can define a reverse-column flexbox and then append items on the bottom of it (visually top).

Here's an example (available as jsfiddle here: https://jsfiddle.net/u91cd38e/1/ )

const el = document.querySelector(".container");
let i = 3;

setInterval(() => el.innerHTML += `<div> Item ${i++} </div>`, 500);

.container {
  display: flex;
  flex-direction: column-reverse;
  height: 200px;
  width: 200px;
  overflow-y: auto;
}

.container div {
  flex-shrink: 0;
  height: 100px;
}

<div class="container">
   <div> Item 1 </div>
   <div> Item 2 </div>
   <div> Item 3 </div>
</div>

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.

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

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.