Scroll anchoring for web developers

移动互联 2017-04-11

One of the strengths of the web is progressive loading, which means that there is no install step and users can start consuming content almost immediately while the site keeps loading. But progressive loading can also result in annoyances, such as an unexpected page jump when offscreen content loads and pushes down what’s currently on the screen. This can be even worse on mobile devices, since smaller screens mean more content is offscreen and page jumps are more likely.



Since its early days, Chrome has taken a stand against bad or abusive content. For instance,

Safe Browsing

warns users before they visit malicious websites, and

visual indicators on tabs

allow our users to quickly track down the source of unexpected noise. Similar to other features designed to protect our users from bad experiences, starting in version 56 Chrome prevents these unexpected page jumps with a new feature called scroll anchoring. This feature works by locking the scroll position on an on-screen element to keep our users in the same spot even as offscreen content continues to load.



Side by side comparison
of a web page with scroll anchoring disabled (left) and enabled (right).






Due to the expressiveness of the web, there might be some content for which scroll anchoring is either unwanted or misbehaving. For this reason, this feature ships alongside the

”overflow-anchor” CSS property

to override the functionality. To further minimize potential issues, scroll anchoring is disabled on complex interactive layouts via

suppression triggers

, and on back/forward navigations to allow for scroll restoration.



Today, scroll anchoring is preventing about three page jumps per page-view, but with your help it could be even better. Get involved by participating in the

scroll anchoring Web Platform Incubator Community Group

, submitting feedback via

g.co/reportbadreflow

, and designing your websites or services with a no-reflow mindset.

Posted by Steve Kobes, “The Unbouncer”

责编内容by:Chromium Blog (源链)。感谢您的支持!

您可能感兴趣的

Application-Defined Networking Basics: Definitions... Virtualization first hit compute in a big way in the late 1990s, fueling VMware’...
Using Code Snippets in Chrome Developer Tools Sources view in Chrome Developer Tools has a code snippets feature, kind of like...
Java Web开发之SpringMVC 进行数据回显 基本介绍 数据回显:模型数据导向视图(模型数据 ---> Controller ---> 视图) 说明:SpringM...
CloudBees acquires CodeShip as devops consolidates More consolidation is afoot in the busy world of backend developer tools. To...
Error linking C libraries downloaded from Homebrew... So guys, I've been struggling for two days trying to get GDAL libraries working ...