Elements with overflow: hidden are scrollable
- Published at
- Updated at
- Reading time
- 1min
Today I came across a release post on www.fxsitecompat.dev. The post included that overflow: clip has been unprefixed in Firefox Nightly.
The overflow: clip is similar to overflow: hidden; both values define that overflowing content should not be visible. The difference between those is that clip forces elements not to be scrollable, whereas elements with overflow: hidden are still scroll containers.
The surprise for me is that elements with overflow: hidden are still scrollable using element. I could see this come in handy when there is an exceptional need for custom scroll behavior.
Reimplementing scroll-behavior most likely comes with many accessibility challenges, but hey... maybe there are good examples out there.
If you want to play around with it, have a look at this CodePen or see it in action in this tweet.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 11 days ago.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.