Elements with overflow: hidden are scrollable (#tilPost)

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…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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.scroll(x, y). 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.


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate
APA
Stefan Judis | Sciencx (2023-01-29T07:25:31+00:00) » Elements with overflow: hidden are scrollable (#tilPost). Retrieved from https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/.
MLA
" » Elements with overflow: hidden are scrollable (#tilPost)." Stefan Judis | Sciencx - Wednesday August 19, 2020, https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/
HARVARD
Stefan Judis | Sciencx Wednesday August 19, 2020 » Elements with overflow: hidden are scrollable (#tilPost)., viewed 2023-01-29T07:25:31+00:00,<https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » Elements with overflow: hidden are scrollable (#tilPost). [Internet]. [Accessed 2023-01-29T07:25:31+00:00]. Available from: https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/
CHICAGO
" » Elements with overflow: hidden are scrollable (#tilPost)." Stefan Judis | Sciencx - Accessed 2023-01-29T07:25:31+00:00. https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/
IEEE
" » Elements with overflow: hidden are scrollable (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/. [Accessed: 2023-01-29T07:25:31+00:00]
rf:citation
» Elements with overflow: hidden are scrollable (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2020/08/19/elements-with-overflow-hidden-are-scrollable-tilpost/ | 2023-01-29T07:25:31+00:00
https://github.com/addpipe/simple-recorderjs-demo