We’ve all done it. You open up an article on your phone and just when you’re getting into the content you’re magically transported to half way across the page only to find yourself mildly annoyed.
Off-screen content is the usual culprit behind these unwanted page jumps. Advertisements, images and other web elements continue to load outside of your viewing area as you read and when a specific object above or below the content loads the result is the viewed content being pushed up or down. Exasperating, indeed.
Chrome versions 56 and beyond are taking steps to minimize this bothersome effect with the new feature “scroll anchoring.”
Scroll anchoring does exactly what it sounds like it should do. It anchors the content of the page and the section you are viewing will remain in place while content that is still loading will be pushed up or down to prevent unwanted page jumps. Check out the difference in the video below.
The science isn’t perfect. Specific sites have varying elements that can inhibit this features ability to work. But, according to the Chrome Blog:
Today we’re preventing an average of almost three “jumps” per pageview, and we’re still getting better.
Steve Kobe’s via The Keyword
In the rare instance a web developer needs to have scroll anchoring disabled, they thought of that too. “
Overflow-anchor” is a simple CSS trick that will tell Chrome to disable or ignore the scroll anchor feature. You can learn more about
overflow-anchor in the developers repository.
These effects will be most apparent on mobile devices as the screens are smaller and there is a lot more content outside the viewport. This update may be small but user experience is what makes or breaks the web and Chrome has just made that experience a little smoother. Thanks!
Source: The Keyword