How to change scrollbars

UX
1

Hi, would you know why certain scrollable elements have this custom scroll-bar (tag selector):

And why other elements have the default browser/OS scroll-bar (post preview, banners, etc.) :

image
image.png1736×467 25.4 KB

image

Is there a way to make all scroll-bars appear as the one that tag selectors have?

2

That is a question for @joffreyjaffeux

1 Like
3

This is what I used for this:

    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 10px;
    }

    &::-webkit-scrollbar-thumb {
      cursor: pointer;
      border-radius: 5px;
      background: dark-light-choose($primary-medium, $secondary-medium);
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 0;
    }

You can learn more about all of this here: ::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN

Honestly I’m not a super huge fan of this and still made it for various reasons but I don’t recommend it, as stated in the MDN article this is not standard and not going to become standard.

7 Likes
4

This topic was automatically closed after 31 hours. New replies are no longer allowed.