Custom scrollbar only in one div

Question

I want to have a custom scroll bar in Chrome.

So, I'm using this sass:

::-webkit-scrollbar {
  width: 0.5em;
  height: 0.5em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.1);
  border-radius: 3px;

  &:hover {
    background: rgba(255,255,255,.2);
  }
}

My problem is that I want this scrollbar style only in an specific div. But if I do:

#boardslist {

  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.1);
    border-radius: 3px;

    &:hover {
      background: rgba(255,255,255,.2);
    }
  }

}

is not working. Any ideas?

Answer 1

#boardslist {

  &::-webkit-scrollbar {
   width: 0.5em;
   height: 0.5em;
  }

  &::-webkit-scrollbar-thumb {
   background-color: rgba(255,255,255,.1);
   border-radius: 3px;

   &:hover {
    background: rgba(255,255,255,.2);
   }
  }
}

Check this out http://codepen.io/tholman/pen/tldwm

Answer 2

If you are doing it for a class, you can do it in the following way. Side bar is the class given to the div that you want to allow scrolling.

.side_bar{
    padding-right: 20px; 
    margin-left: -12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: scroll;
    /* width */

}
.side_bar::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
.side_bar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 2px grey; 
        border-radius: 10px;
    }

    /* Handle */
.side_bar::-webkit-scrollbar-thumb {
        background: rgb(7, 7, 7); 
        border-radius: 10px;
    }

    /* Handle on hover */
.side_bar::-webkit-scrollbar-thumb:hover {
        background: #009eb3; 
    }

Answer 3

It's 2020 and ::-webkit-scrollbar is still not supported in Firefox. Besides overflow:auto shows scrollbar when content overflows in Chrome and Safari, but in Firefox there will be no visible scrollbar until we start scrolling. Go guess whether content is scrollable or not. Same with overflow:scroll. Not very intuitive.

Answer 4

Well, 2022 and still no support in Firefox:
https://caniuse.com/?search=%3A%3A-webkit-scrollbar

However, basics can be customized in Firefox:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
https://caniuse.com/?search=scrollbar-color

/* Chrome */
.container::-webkit-scrollbar {
    width: 5px;
}

.container::-webkit-scrollbar-track {
  /*background-color: grey;*/
  box-shadow: inset 0 0 5px grey; 
  border-radius: 15px;
}

.container::-webkit-scrollbar-thumb {
  background-color: orange; 
  border-radius: 15px;
  /*border: 1px solid red;*/
}

/*.container::-webkit-scrollbar-button {
  background-color: red;
   border-radius: 15px;
}*/

.container::-webkit-scrollbar-thumb:hover {
  background: red; 
}

/* IE */
.container {
  scrollbar-face-color: orange; 
  scrollbar-shadow-color: grey; 
  scrollbar-highlight-color: red;
}

/* FireFox */
.container {
  scrollbar-color: orange grey;
  scrollbar-width: thin;
}

/* View Scrollbar */
.container {
  overflow-y: scroll;
  overflow-x: hidden;
  width:400px;
  height: 200px;
}

Working example is here:
https://codepen.io/svigir/pen/LYOOjyj