Customize Scrollbar

seo

I want to customize the Scrollbar according to the pattern as in the image, then how to do it Please help me.

giter

div#admin-navigation::-webkit-scrollbar {
  width: 0.5em;
}
div#admin-navigation::-webkit-scrollbar-track {
  //background-color: #1D2731;
    background-color: #506B92;
}

div#admin-navigation::-webkit-scrollbar-thumb {
  border-radius:10px;
  background-color: #506B92;
  outline: 1px solid slategrey;
}


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

body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #506B92;
}

body::-webkit-scrollbar-thumb {
  border-radius:10px;
  background-color: #1D2731;
  outline: 1px solid slategrey;
}

tolgaaaltas

seo Also this:

::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  -webkit-border-radius: 10px;
  background: fade(#000, 10%);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: fade(@primary-color, 80%); 

}
::-webkit-scrollbar-thumb:window-inactive {
  background: fade(@primary-color, 40%);
}