<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<ul class="content1">
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
</ul>
<ul class="content2">
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
</ul>
<ul class="content3">
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
<li>Create your snippet's HTML, CSS and Javascript in the editor tabs</li>
</ul>
</div>
body {
background: #fbfbfb;
padding: 50px 0;
}
/* ========== Style 1 =========*/
.content1 {
height: 100px;
overflow-y: scroll;
border: 2px solid #333;
padding: 5px 10px;
}
.content1::-webkit-scrollbar {
width: 5px;
background: yellow;
}
.content1::-webkit-scrollbar-thumb {
background: green;
}
.content1::-webkit-scrollbar-button {
background: red;
border-radius: 50%;
height: 5px;
}
/* ========== Style 2 ========== */
.content2 {
height: 100px;
overflow-y: scroll;
border: 2px solid #333;
padding: 5px 10px;
}
.content2::-webkit-scrollbar {
width: 5px;
background: yellow;
border-radius: 10px;
}
.content2::-webkit-scrollbar-thumb {
background: green;
border-radius: 10px;
}
/* ========== Style 3 ========== */
.content3 {
height: 100px;
overflow-y: scroll;
border: 2px solid #333;
padding: 5px 10px;
}
.content3::-webkit-scrollbar {
width: 10px;
background: #86868620;
border-radius: 10px;
}
.content3::-webkit-scrollbar-thumb {
background: #86868680;
border-radius: 10px;
}
