CODEWITHSUNDEEP
htmlcssscrollbar
Mati Tucci
Mati Tucci

Reputation: 2976

Custom scrollbar only in one div

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?

Upvotes: 32

Views: 54582

Answers (4)

Ramirez
Ramirez

Reputation: 21

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

Upvotes: 2

Alonad
Alonad

Reputation: 2256

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.

Upvotes: 2

Cyber Square Professional
Cyber Square Professional

Reputation: 790

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; 
    }

Upvotes: 27

jonidelv
jonidelv

Reputation: 663

#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

Upvotes: 45

Related Questions