CSS for a Vertical Scroll Bar

Video Tutoral at https://youtu.be/Eq2DgQsqrjM
<html>
<head>
 <style>
       .scroll-bar {
         height: 100%;
         width:130px;
         border:1px solid grey;
         font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
         overflow: auto;
}

::-webkit-scrollbar {
width: 10px; 
}

::-webkit-scrollbar-track {
border: 1px solid #bdffe6;
border-radius: 8px;
}

::-webkit-scrollbar-thumb {
background: #bdffe6;  
border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
background: #a2fcdb;
}
 </style>
</head>

<body>

<div class="scroll-bar">
If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height. If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.If you keep the height 100%, the scroll effect will start only after the texts exceeding 100% height.
</div>

</body>
</html>