The overflow: hidden property and sticky headers
While working on Kelp, my UI library for people who love HTML, I learned something new-to-me:
Setting overflow: hidden prevents the position: sticky property from working.
It doesn’t even matter if the hidden overflow is in the scroll direction. Setting overflow-x: hidden to prevent horizontal scroll prevents sticky headers from sticky with vertical scrolling.
I also learned that overflow: clip solves this very problem!
The overflow: clip property produces the same visual effect as overflow: hidden. Content is not visible, not scrollbars are displayed, and the user cannot scroll to the hidden content.
But unlike overflow: hidden, a sticky header still works with overflow: clip.
Why two properties that seem to do the same thing?
The overflow: clip property was created to solve a different problem, as my buddy Kilian Valkhof explains…
Clip was added for a particular reason: an element with
overflow: hiddencould still programmatically scroll (just not as the result of a user interacting with it).
For example, using JavaScript’s scrollTo() method, you could scroll into a hidden area on an overflow: hidden element. With overflow: clip, you can’t.
But as a byproduct of how overflow: clip works under-the-hood, it doesn’t mess with how position: sticky works.