Google officially rolls out Scroll Anchoring to Fix Annoying Page Jumps

Google officially rolls out Scroll Anchoring to Fix Annoying Page Jumps

Last year, we pointed out a fix to prevent annoying page jumps in Google Chrome that cause you to click on something you didn’t want to click on. That fix is called “Scroll Anchoring”, and it required you to enable an experimental flag in chrome://flags. The reason this issue arises is due to “progressive loading” of web content which allows users to interact with a webpage before it has fully loaded. However, this often resulted in off screen content loading seconds after the user began interacting with the web page, pushing down content that is currently on screen and often resulting in misclicks. Now, the feature that fixes this, scroll anchoring, is finally being enabled for all users starting in Chrome version 56.

This feature is called scroll anchoring because, when enabled, Chrome will lock the current scroll position on an on-screen element while off screen content continues to load, which should prevent unexpected page jumps. Google claims that, since implementing scroll anchoring, the feature is preventing “about three page jumps per page-view” which is already a significant improvement.

However, not all web elements work nicely with this feature, as many of us who enabled the experimental feature last year soon discovered. Some web content would misbehave when a user has scroll anchoring enabled, but for these, Google is introducing a new CSS property called “overflow-anchor” which web developers can implement to override scroll anchoring.

Google’s new scroll anchoring feature is said to be rolling out to Chrome version 56 and onwards, which means it should be enabled in the stable, beta, dev, and canary channels, but in case you don’t notice the feature, you can double check to see if it’s enabled by pasting chrome://flags/#enable-scroll-anchoring into your address bar. The default option, as set by Google, will enable the feature, but there’s no harm in manually setting it to enabled here.


Source: Chromium Blog

Discuss This Story

READ THIS NEXT