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:

With scroll anchoring:

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:

With scroll anchoring:

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:

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:

I’m a software engineer that specializes in front-end web development. Learn more at cjmil.com.