How To Create a Custom Scrollbar


Jan 4, 2019

Create custom scrollbar, Custom scrollbars are popular, and you might have come across websites that have unique scrollbars, making the sites feel and look professional. There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS. but I do not like to add more JavaScript to my website. If you are a designer or you just want your website to have a cool scrollbar than go ahead and follow.

CSS Code:


           .scrollbar
            {
                background: #F1F1F1;
                float: left;
                height: 250px;
                width: 100px;
                margin-left: 30px;
                overflow-y: scroll; 
            }
            .overflow
            {
                height: 300px;
            }
            .wrapper
            {
                text-align: center;
                width: 800px;
                margin: auto;
            }

            /* SCROLL STYLE 1*/
            .scroll-1::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
                border-radius: 15px;
                background-color: #F5F5F5;
            }
             .scroll-1::-webkit-scrollbar-thumb
            {
                border-radius: 15px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,.3);
                background-color: #DC143C;
            }
            .scroll-1::-webkit-scrollbar
            {
                width: 15px;
                background-color: #F5F5F5;
            }
   
            /* SCROLL STYLE 2*/
            .scroll-2::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
                border-radius: 10px;
                background-color: #F5F5F5;
            }
            .scroll-2::-webkit-scrollbar-thumb
            {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,.3);
                background-color: #BDB76B;
            }
            .scroll-2::-webkit-scrollbar
            {
                width: 10px;
                background-color: #F5F5F5;
            }
            
            /* SCROLL STYLE 3 */
            .scroll-3::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
                background-color: #F5F5F5;
            }
            .scroll-3::-webkit-scrollbar-thumb
            {
                background-color: #111;
            }
            .scroll-3::-webkit-scrollbar
            {
                width: 5px;
                background-color: #F5F5F5;
            }

            /* SCROLL STYLE 4 */
            .scroll-4::-webkit-scrollbar-track
            {
                border: 1px solid black;
                background-color: #F5F5F5;
            }
            .scroll-4::-webkit-scrollbar-thumb
            {
                background-color: #008080; 
            }
            .scroll-4::-webkit-scrollbar
            {
                width: 10px;
                background-color: #F5F5F5;
            }
            
            /* SCROLL STYLE 5 */
            .scroll-5::-webkit-scrollbar-track
            {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
                background-color: #F5F5F5;
            }
            .scroll-5::-webkit-scrollbar-thumb
            {
                background-color: #800000;
            }
            .scroll-5::-webkit-scrollbar
            {
                width: 10px;
                background-color: #F5F5F5;
            }

HTML Code:


       <div class="wrapper">

            <div class="scrollbar scroll-1">
                <div class="overflow"></div>
            </div>

            <div class="scrollbar scroll-2">
                <div class="overflow"></div>
            </div>

            <div class="scrollbar scroll-3">
                <div class="overflow"></div>
            </div>


            <div class="scrollbar scroll-4">
                <div class="overflow"></div>
            </div>

            <div class="scrollbar scroll-5">
                <div class="overflow"></div>
            </div>

        </div>

Copyright 2018. All rights are reserved