Custom scrollbar only in one div
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;
}
#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