CODEWITHSUNDEEP
javascriptgoogle-chromescroll
everyonesdesign
everyonesdesign

Reputation: 364

Disable Chrome's scroll preserving feature

I have a page containing a list of items:

enter image description here

Load more button should load some more items via ajax and append it to the items container preserving current scroll position. So after I click it the feed I expect it to look like this (green items are new):

enter image description here

But in fact Chrome 56 executes some computations to make the page stay in the same state, and what I see looks like this:

enter image description here

Is there any way to prevent this smart scrolling position setting in Chrome?

Update: I can reproduce the behavior only if parent container ('body' in my case) has 'display: flex' property (I use it to achieve 'sticky footer' feature).

Upvotes: 12

Views: 4241

Answers (4)

Sorin Vasiliu
Sorin Vasiliu

Reputation: 217

Today it seems that this property was excluded? When adding 'overflow-anchor: none;' as style on a div element I get the message: Validation (CSS 3.0): "overflow-anchor" is not a known css property name.

Upvotes: 2

Marko
Marko

Reputation: 5552

I solved a similar problem by adding overflow-anchor: none; to the scroll container.

https://wicg.github.io/ScrollAnchoring/

Upvotes: 16

JT2809
JT2809

Reputation: 380

Why chrome makes calculations to preserve the scroll position? Usually the page will only be longer, so the scroll position stay fixed anyway. I assume you remove the button, so the position cannot be kept, while content was not reloaded. You should reserve the button space in the dom and remove the reserved space when inserting the reloaded items.

Upvotes: 0

Wais Kamal
Wais Kamal

Reputation: 6180

This is simple. Before performing your AJAX call, save the scroll position of the page to a variable, then, after the call, scroll to the position indicated by that variable. Here is what you should write before your AJAX call:

var scrollpos = window.scrollY;

and here is the code after your AJAX call

window.scrollTo(0,scrollpos)

Hope this works

Upvotes: 0

Related Questions