Scroll anchoring sounds painful, or even worse something that happens at sea. Thankfully it isn't and it is a really good idea. It is such a good idea, and so simple, that you can't really understand why it has taken so long to be noticed. Are there other rendering improvements just waiting to be implemented?

Most browsers, not just Chrome, use progressive loading to show users something useful as soon as possible. The idea is basically to show the user what content has loaded as soon as anything is avaiable. So a browser will, for example, show the text of a page even if all of the images haven't loaded yet. 

Of course, there is a problem with progressive loading that you must have encountered while browsing the web. You start to read a page and scroll down to see the next part when suddenly a picture or some other resource higher up the page finishes loading. The result is that the page is rendered again and the scroll point is lost and the page jumps. In these cases it might have been better from the point of view of the reader to wait until the page was completely finished. 

If you think about it for a moment there is absolutely no reason why an off-screen resource should interrupt the user's viewing of the page. All that is needed is to lock the scroll position to the content and leave the user viewing what they were originally viewing.  This is scroll anchoring and it is what Chrome has just implemented. Check out the video to see it in action:

Much better isn't it?

But you have to wonder why browsers ever did the jump thing in the first place. 

Good web design can minimize the reflow of pages. For example, specifying the size of an image allows the browser to layout the other elements before it has loaded. In principle the image can then be inserted into the space left for it without a complete page re-flow. However, it isn't always possible to know the size of an image beforehand. 

Given the way that almost any behavior can be used in some way that will cause it to break if it is changed, you can opt to turn off scroll anchoring if for some reason your complex layout depends on the user's scroll position being reset when the page finishes loading. Clearly this isn't going to be common in regular web pages, but it could occur in some single-page apps. There is a new css property, overflow-anchor, which is set to auto by default but you can set it to none to disable scroll anchoring. 

Scroll anchoring is a prospective W3C standard and you can read about it in the draft report. Google seems to have got ahead of the game with this one, as it is also supported as an experimental feature in Chrome OS. 

More Information

W3C Scroll Anchoring

Scroll anchoring for web developers

Related Articles

WebAssembly Explorer - A Learning Tool 

Over 2 Billion Chrome Browsers In Use 

Chrome Apps No Longer On Windows,Mac And Linux

Progress On WebAssembly

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info