• css

How to style Browser Scrollbars

Scrollbars still look like 1995 on Windows, so here is an example how to style browser scrollbars (in use on this website). The CSS poperty only works in Firefox for now, but the other gibberish underneath also makes Chrome look great!

Edit: Updated Snippet. In case you only want to change scrollbar style on windows an keep the original everywhere else, a bit of js is required. More details in the article by filamentgroup: Two Browsers walked into a Scrollbar


:root {
  --scrollbar-size: 0.75rem;
  --scrollbar-minlength: 1.5rem; /* min length of scrollbar thumb (width of horizontal, height of vertical) */
  --scrollbar-ff-width: thin; /* FF-only accepts auto, thin, none */
  --scrollbar-track-color: transparent;
  --scrollbar-color: rgba(200, 200, 200, 0.2);
  --scrollbar-color-hover: rgba(200, 200, 200, 0.3);
  --scrollbar-color-active: rgb(200, 200, 200, 0.8);
}
.styled-scrollbar {
  /* firefox */
  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
  scrollbar-width: thin; /* webkit */
  &::-webkit-scrollbar {
    height: var(--scrollbar-size);
    width: var(--scrollbar-size);
  }
  &::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-color);
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-color-hover);
  }
  &::-webkit-scrollbar-thumb:active {
    background-color: var(--scrollbar-color-active);
  }
  &:-webkit-scrollbar-thumb:vertical {
    min-height: var(--scrollbar-minlength);
  }
  &:-webkit-scrollbar-thumb:horizontal {
    min-width: var(--scrollbar-minlength);
  }
}

Published:
Updated: