Chrome Introduces Scroll Anchoring
Chrome Introduces Scroll Anchoring
Written by David Conrad   
Wednesday, 12 April 2017

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?

chromiumicon

 

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. 

 chromedevs

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, FacebookGoogle+ or Linkedin.

 

Banner


MongoDB Stitch Makes App Development Easier
23/06/2017

A new back end for MongoDB has been announced. MongoDB Stitch has a document-centric API that handles the interface between apps and back-end data. 



Mozilla Updates and Renames MDN
08/06/2017

Mozilla Developer Network, generally referred to as MDN, is preparing for a new brand identity and a new look for its site, along with more content and additional features. Mozilla is inviting fe [ ... ]


More News

 
 

 

blog comments powered by Disqus

 

Last Updated ( Wednesday, 12 April 2017 )
 
 

   
RSS feed of news items only
I Programmer News
Copyright © 2017 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.