Ryan Hunt's Blog

Tag: Scroll Anchoring

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

March 28, 2019 - web scroll-anchoring

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

March 28, 2019 - web scroll-anchoring

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

Check it out!