"Css Scrollbar"
Bootstrap 4.1.1 Snippet by trinhquan

<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; }

Related: See More


Questions / Comments: