TIL: scroll-padding

Last updated: Fri Apr 21 2023

Yesterday I said that, when using a sticky header, there’s no way to scroll to the correct position using only CSS. I should have known better than to trust ChatGPT or my Googling abilities!

You can in fact specify scroll-padding, which adds padding to the scrollable area and allows anchor links to respect the header offset, just like I wanted. I’ve removed the extra JavaScript and added a scroll-padding-top instead.

Huge hat-tip to Tiger Oakes for pointing this out to me!

Sources