Register for this year’s #ChromeDevSummit happening on Nov. 11-12 in San Francisco to learn about the latest features and tools coming to the Web. Request an invite on the Chrome Dev Summit 2019 website

Experiment Time: Scroll Anchoring

Have you ever visited a web page, started reading some of the content and then the page sort of pops due to ad’s or images loading, making you lose your place on the page?

Well it might be worth checking out the Scroll Anchoring flag in Chrome 51.

Scroll Anchoring keeps track of where you are on the page and prevents anything that causes a reflow from disrupting your position on the page.

To try this feature out for yourself do the following:

Go to chrome://flags/#enable-scroll-anchoring on Chrome Dev / Canary

Select “Enabled” from the dropdown

Click “Relaunch Now” at the bottom of the screen

With this you’ll have scroll anchoring enabled.

We've been using this for a while and we believe that this drastically improves the experience for all users on the web but we want to make sure that it works well everywhere. If you spot any examples where scroll anchoring failed to handle reflows in the page or examples where it shouldn’t have intervened, we desperately want to hear about it!

Send us feedback / examples where you’ve seen unexpected behavior by filling out this form: g.co/reportbadreflow

FAQ

How does this change affect JavaScript scrolling?

In short - it doesn't.

This change alters the effect of scrolling caused by reflows. For
example, adding a class name to an element that causes it to
increase in height will cause a reflow and scroll anchoring will prevent the
page from jumping around.

Calling window.scrollTo(0, 1) (Yes the old school hack) wouldn't cause a reflow
and will behave normally. The same goes for touch events.

If you find an example where scroll anchoring is affecting your page, please
send feedback via this form: g.co/reportbadreflow