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 and are still scrollable via JavaScript element.
This is a long piece of content that overflows the container.
It keeps going and going to make sure there is enough text to scroll through.
Can you scroll down to read this paragraph?
And this one? If you can see this via element.scrollTo(), the container is scrollable.
overflow: hidden hides overflowing content but the element is still a scroll container. JavaScript can scroll it programmatically.This is a long piece of content that overflows the container.
It keeps going and going to make sure there is enough text to scroll through.
Can you scroll down to read this paragraph?
And this one? If you can see this via element.scrollTo(), the container is scrollable.
overflow: clip hides overflowing content and prevents the element from being a scroll container entirely. scrollTo() doesn't throw — it just silently does nothing.This is a wild fun fact! However, 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.
Join 6.5k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.