How would i make the scrollbar thumb a shadow
Answered
Yacare Caiman posted this in #help-forum
Yacare CaimanOP
So i'm building a website rn, and in my globals.css I want to change that the scrollbar is shadow. What I exactly mean by that, is that the scroll bar isn't a solid color or smth like that, but i want it to be that when you scroll i looks like your mooving an object up and down infront of a hypothetical light source wich iluminates the website
Answered by Rose-breasted Grosbeak
scrollbar styling doesn't have standard browser support.
Firefox supports standard
Default stlying also differs on mobile and desktop
Firefox supports standard
scrollbar-* css properties, while chrome and safari use https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarDefault stlying also differs on mobile and desktop
15 Replies
is this the kind of thing you’re referring to:
https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
or do you mean like specifically just the scroll bar itself having a shadow?
https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
or do you mean like specifically just the scroll bar itself having a shadow?
@clarity is this the kind of thing you’re referring to:
https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
or do you mean like specifically just the scroll bar itself having a shadow?
Yacare CaimanOP
I don't mean both, what i want is that you just see the thumb, and that he is just a shadow
it's kinda hard to explain ig
-# bump
-# bump
@Yacare Caiman it's kinda hard to explain ig
-# bump
yeah lol
what do you mean by “just see the thumb”? do you want to like cast a shadow when the user scrolls at all?
what do you mean by “just see the thumb”? do you want to like cast a shadow when the user scrolls at all?
OH WAIT
i know what you mean
Yacare CaimanOP
you do?
like this is what i thought
just with a real shadow obv
just with a real shadow obv
Yacare CaimanOP
anyone else maybe able to help?
Rose-breasted Grosbeak
scrollbar styling doesn't have standard browser support.
Firefox supports standard
Default stlying also differs on mobile and desktop
Firefox supports standard
scrollbar-* css properties, while chrome and safari use https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbarDefault stlying also differs on mobile and desktop
Answer
Yacare CaimanOP
rn im trying it with ::-webkit
or is it rather worse to atleast make it work for some browsers?
Rose-breasted Grosbeak
give that article a read, it'll answer most of your questions