How to change scrollbars

[nexo]

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

Gyazo Screen Video

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

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

[codinghorror (Jeff Atwood)]

That is a question for @j.jaffeux

[j.jaffeux (Joffrey Jaffeux)]

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 pseudo-element - CSS | 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.