CSS, CSS3

CSS: Custom Scrollbar

custom-scrollbar

/* Let's get this party started */
::-webkit-scrollbar {
    width: 9px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 7px;
    border-radius: 7px;
    background: rgba(242,242,242,0.3); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    cursor: pointer !important;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(242,242,242,0.3); 
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(242,242,242,0.5); 
}

Reference: Custom Scrollbar

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × three =