How to change scrollbars

UX
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