<div class='flx'>
  <div class='demoScroll' id='sc1'>
    <div class='h500'></div>
  </div>
  <div class='demoScroll' id='sc2'>
    <div class='h800'></div>
  </div>
  <div class='demoScroll' id='sc3'>
    <div class='h600'></div>
  </div>
  <div class='demoScroll' id='sc4'>
    <div class='h400'></div>
  </div>
  <div class='demoScroll' id='sc5'>
    <div class='h500'></div>
  </div>
  <div class='demoScroll' id='sc6'>
    <div class='h600'></div>
  </div>
  <div class='demoScroll'></div>
</div>
body {
  background-color: #22262d;
  text-align: center;
  min-height: 100vh;
}
.flx {
  display:flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.h400 {
  height: 400px;
}
.h500 {
  height: 500px;
}
.h600 {
  height: 600px;
}
.h700 {
  height: 700px;
}
.h800 {
  height: 800px;
}
.demoScroll {
  height: 300px;
  overflow-y: auto;
  width: 50px;
}

/* Scroll 1 */
#sc1::-webkit-scrollbar {
  width: 8px;
}
#sc1::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}
#sc1::-webkit-scrollbar-thumb {
  background-color: #dfdfdf;
  border-radius: 10px;
}

/* Scroll 2 */
#sc2::-webkit-scrollbar {
  width: 5px;
}
#sc2::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
#sc2::-webkit-scrollbar-thumb {
  background-color: #11171a;
  border-radius: 10px;
}

/* Scroll 3 */
#sc3::-webkit-scrollbar {
  width: 10px;
}
#sc3::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
#sc3::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

/* Scroll 4 */
#sc4::-webkit-scrollbar {
  width: 12px;
}
#sc4::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
#sc4::-webkit-scrollbar-thumb {
  background-color: #e78632;
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

/* Scroll 5 */
#sc5::-webkit-scrollbar {
  width: 15px;
}
#sc5::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}
#sc5::-webkit-scrollbar-thumb {
  background-image: linear-gradient(45deg, #00aeff, #a68eff);
  border-radius: 10px;
	-webkit-box-shadow: rgba(0,0,0,.12) 0 3px 13px 1px;
}


/* Scroll 6 */
#sc6::-webkit-scrollbar {
  width: 12px;
}
#sc6::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}
#sc6::-webkit-scrollbar-thumb {
  background-color: #aab74d;
  background-image:-webkit-linear-gradient(rgba(255,255,255,.3) 20%,transparent 20%,transparent 40%,rgba(255, 255, 255, 0.3) 40%,rgba(255,255,255,.3) 60%,transparent 60%,transparent 80%,rgba(255, 255, 255, 0.3) 80%);
  border-radius: 10px;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,500,700

External JavaScript

This Pen doesn't use any external JavaScript resources.