This content originally appeared on Go Make Things and was authored by Go Make Things
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.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-10-06T14:30:00+00:00) The overflow: hidden property and sticky headers. Retrieved from https://www.scien.cx/2025/10/06/the-overflow-hidden-property-and-sticky-headers/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.