Implementing a pin-to-bottom scrolling element with only CSS

Thu, 28 Mar 2019 05:08:02 -0600

Have you ever tried implementing a scrollable element where new content is being added and you want to pin the user to the bottom? It’s not trival to do correctly.

I recently worked on a new CSS feature called ‘scroll anchoring’ that shipped in Firefox 66 (for an introduction, check out my post on Mozilla Hacks or the summary on MDN).

While implementing this feature, Nicolas Chevobbe and I were debugging an issue and discovered that scroll anchoring can be used to create a pin-to-bottom scrolling element without any Javascript.

It’s a neat trick, so I thought I’d post the snippet here and explain how it works.

Scroll Anchoring in Firefox 66

Thu, 28 Mar 2019 05:07:02 -0600

I wrote an article about the work on scroll anchoring that I did for Firefox 66.

Check it out!

Scroll-Anchoring on Ryan Hunt's Blog

Implementing a pin-to-bottom scrolling element with only CSS

Scroll Anchoring in Firefox 66