Chrome scroll behavior when adding items to the DOM

Question

I am implementing an infinite scroll in order to display operations grouped by date. When the user reaches the bottom of the page, I load the next operations.

So, after scrolling a little, the user will see this :

-------------------------------------------
May, 23rd
  Operation 11
  Operation 12     This zone is visible
  Operation 13     by the user
  Operation 14
  Operation 15
  page bottom
-------------------------------------------
                    this zone is outside 
                    of the viewport
-------------------------------------------

As the bottom is reached, the new operations are loaded. The expected behavior is this :

-------------------------------------------
May, 23rd
  Operation 11
  Operation 12     This zone is visible
  Operation 13     by the user
  Operation 14
  Operation 15
-------------------------------------------
  Operation 16
  Operation 17
  Operation 18      this zone is outside 
  Operation 19      of the viewport
  Operation 20
  page bottom
 -------------------------------------------

The loading is transparent to the user. Scrolling can continue seamlessly. The actual behavior, in Chrome only is that :

-------------------------------------------
  Operation 16
  Operation 17
  Operation 18      This zone is visible 
  Operation 19      by the user
  Operation 20
  page bottom
-------------------------------------------
                    this zone is outside 
                    of the viewport
-------------------------------------------

It seems that Chrome autoscrolls in order to keep the last element visible (here, the page bottom). This results in an infinite loading of next operations.

The data is a map {[key: string]: Operation[]} where key is a date represented as a string.

I render it like this :

<section *ngFor="let entry of accountOperations | keyvalue:descOrder">
  <h3>{{entry.key}}</h3>
  <ul>
    <li *ngFor="let operation of entry.value">
      <app-operation [operation]="operation">
      </app-operation>
    </li>
  </ul>
</section>

Question : Is there a javascript function that I can call to deactivate this behavior ?

I prepared a StackBlitz in order to reproduce the problem. Please try it in Chrome.

Scenario :

• Click 10 times on "Add a category to the map"
• Scroll to the bottom of the page
• Click 3 times again on "Add a category to the map"
• The page bottom remains visible. It should not.

Curiously, I don't reproduce the problem if I use a simple list with *ngFor (which you can test with the other button : "Add an item to the list")

Also, I don't have the problem if I remove the "Page Bottom" element. I suppose that in this case, Chrome will focus on the last element of the list.

Answer 1

Some css on the child element fixed this issue for me.

In my case:

.load-more{
  overflow-anchor: none;
}

Answer taken from here: Stop automatic scrolling on page content change