Post

💡 CSS Tip! Do you want to detect the overflow of an element? Does it have a scrollbar or not? It's possible with only CSS (No JavaScript!) You can even style any element on the page using this information 🤩 Code & demo 👉 css-tip.com/overflow-det... ⚠️ Chrome only for now ⚠️ #CSS

10/12/24, 10:27 am17 reposts103 likes

Mark Robbins

@goodemailcode.com

10 Dec 2024

Oh nice, I was looking for something like this the other day (although I needed it for Safari) but still great to know!

Rob

@lloveras.info

11 Dec 2024

Very nice But slight bug. To replicate Resize box until scroll bar is visible. scroll down Resize box. Not detected until you get the scroll bar back.

Поміркований бандера 🇺🇦

@esq-untitle.bsky.social

👀 great

Yes, I did know – www.bram.us/2023/09/16/s... 😉 And soon you’ll be able to use scroll state queries for this: drafts.csswg.org/css-conditio... 🤩 Available in Chrome Canary behind a flag. @nerdy.dev has a bunch of demos built using it.

bram.usSolved by CSS Scroll-Driven Animations: Detect if an element can scroll or notLeverage Scroll-Driven Animations + a Space Toggle or State Query to selectively style an element based on it being scrollable or not.

CSS by T. Afif

@css-only.dev

10 Dec 2024

I was sure I have seen a similar article in your blog but I stopped searching when I reached "CSS wrapped 2023" 😅

CSS by T. Afif

@css-only.dev

10 Dec 2024

"A downside of this approach is that is that you can only style child elements of the container". At least I am adding the case where you can style any element on the page which is a game changer 😄 (it was probably not possible one year ago)

Adam Argyle

@nerdy.dev

10 Dec 2024

Agree, came here to share the limits of the query vs the solution you're sharing, but you found it!

Bramus

@bram.us

10 Dec 2024

Yes, clever of you to hoist use `timeline-scope` to hoist up its reach – hadn’t thought of that!