CSS Scroll Anchoring: My Experience

An exciting new standard and why you may want to disable it

I learned about Scroll Anchoring a few months back and at first, I thought it was a bug. My whole team did, in fact.

The context I learned about it was when my team was rebuilding the way we present customer reviews on our website. If a customer leaves a really long review, we truncate it after a few lines and present a “View More” button to expand the rest of the review.

This was looking great, except in Chrome. In every non-Chrome browser, clicking the “View More” button would expand the content of the review down as we expected. In Chrome, however, the review would appear to expand upwards.

I put together two gifs showing the behavior.

Without scroll anchoring:

Clicking “View More” causes the review content above to push the button and the rest of the page down a bit. This is the behavior my entire team was used to and expected to see.

With scroll anchoring:

Clicking to expand the review causes the content above the button to appear to be “pushed up”. Our whole team thought this was a bug.

Now that I understood this was expected behavior, I wanted to learn more about why this was expected. Briefly: In a majority of cases, it’s a better user experience for the user’s place/focus on the page to stay where it is than to allow new content to push the page down. For example, if the page has a banner ad on the top of the page that takes a few seconds to fully load, a user may see their entire page jump around a little while the browser recalculates the correct heights for all of the page content.

Without scroll anchoring:

This banner ad at the top of the page is loaded asynchronously after the page content and pushes all the content below it down. This is already a pretty jarring experience but could lead to misclicking the ad itself if the banner was big enough.

With scroll anchoring:

The banner ad at the top still loads but I can barely tell. The only indicator is the scrollbar to the right that moves down by itself to offset the ad’s additional height.

With a better understanding of when it’s useful, I felt confident that our use-case was best without scroll anchoring, so I chose to turn it off. Turning scroll anchoring off is super simple in CSS:

body {
    overflow-anchor: none;
}

I chose to turn it off on the whole page since it was all server-side rendered, but I could have chosen to turn it off on just the reviews section if I wanted to keep scroll anchoring on for other parts of the page.

As time goes on and the internet keeps evolving, I’m convinced this small but significant feature will become the default in all major browsers. If you maintain a website with client-side rendering or animations that need constant recalculation, be careful in messing with this default and think critically about the impact on the end-user.

For additional information about scroll anchoring and overflow-anchor, I’d recommend:

• CSS-Tricks’ post about overflow-anchor
• MDN’s guide to scroll anchoring
• CSS Scroll Anchoring Module Specification from CSSWG