Code Snippets

Welcome to my custom code snippets for web development. These are free to use.

Custom Skins for Scrollbars

With this custom scrollbar code, just add your own images for the UI and apply this style to a box element such as a DIV container or a table cell and more.

/* Scrollbar Skins (vertical) */
#scrollbox{
overflow:scroll;
background-color:#393939;
color:#FF4500;
min-height:200px;
min-width:200px;
max-height:200px;
max-width:200px;
white-space: nowrap;
padding:0px;
}

    /* width */
#scrollbox::-webkit-scrollbar {
    width:25px;
 }

    /* Track */
#scrollbox::-webkit-scrollbar-track:vertical {
    border-left:2px solid #080808;
    border-right:2px solid #080808;
    background-image:url('spire.png'); 
    border-radius: 0px;
    background-color: #202020;
    }

    /* Handle */
#scrollbox::-webkit-scrollbar-thumb:vertical {
    background-color: #272727;
    border:1px solid #080808;
    border-radius: 0px;
    background-image:url('ts.png'), url('bs.png'), url('msh.png');
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-position:top, bottom, center;
    }
    
    /* Buttons */
#scrollbox::-webkit-scrollbar-button {
    }
    
#scrollbox::-webkit-scrollbar-button:vertical:increment {
    background-image: url('ddown.png');
    width:25px;
    height:25px;
    border-left:1px solid #080808;
    border-bottom:1px solid #080808;
    border-right:1px solid #080808;
}

#scrollbox::-webkit-scrollbar-button:vertical:decrement {
    background-image: url('uup.png');
    width:25px;
    height:25px;
    border-right:1px solid #080808;
    border-bottom:1px solid #080808;
    border-left:1px solid #080808;
}




/* Scrollbar Skins (horizontal) */

    /* height */
    #scrollbox::-webkit-scrollbar:horizontal {
    height: 25px;
 }

    /* Track */
    #scrollbox::-webkit-scrollbar-track:horizontal {
    border-bottom:2px solid #080808;
    border-top:2px solid #080808;
    background-image:url('spire.png'); 
    border-radius: 0px;
    background-color: #202020;
    }

    /* Handle */
    #scrollbox::-webkit-scrollbar-thumb:horizontal {
    background-color: #272727;
    border:1px solid #080808;
    border-radius: 0px;
    background-image:url('ls.png'), url('rs.png'), url('ms.png');
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position:left, right, center;
    }
    
    /* Buttons */
#scrollbox::-webkit-scrollbar-button {
    }
    
#scrollbox::-webkit-scrollbar-button:horizontal:increment {
    background-image: url('fforw.png');
    width:25px;
    height:25px;
    border-top:1px solid #080808;
    border-bottom:1px solid #080808;
    border-right:1px solid #080808;
}

#scrollbox::-webkit-scrollbar-button:horizontal:decrement {
   background-image: url('bback.png');
    width:25px;
    height:25px;
    border-top:1px solid #080808;
    border-bottom:1px solid #080808;
    border-left:1px solid #080808;
}

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Integer nec odio. Praesent libero. Sed cursus ante dapibus 
    diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. 
    Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed 
    augue semper porta. Mauris massa. Vestibulum lacinia arcu 
    eget nulla. Class aptent taciti sociosqu ad litora torquent
    per conubia nostra, per inceptos himenaeos. Curabitur sodales
    ligula in libero. Sed dignissim lacinia nunc. Curabitur
    tortor. Pellentesque nibh. Aenean quam. In scelerisque sem
    at dolor. Maecenas mattis. Sed convallis tristique sem. Proin
    ut ligula vel nunc egestas porttitor. Morbi lectus risus, 
    iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
    quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus,
    ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque 
    volutpat condimentum velit. Class aptent taciti sociosqu ad 
    litora torquent per conubia nostra, per inceptos himenaeos. 
    Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor 
    neque adipiscing diam, a cursus ipsum ante quis turpis. 
    Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc 
    feugiat mi a tellus consequat imperdiet. Vestibulum sapien.
    Proin quam. Etiam ultrices. Suspendisse in justo eu magna 
    luctus suscipit. Sed lectus. Integer euismod lacus luctus 
    magna. Quisque cursus, metus vitae pharetra auctor, sem 
    massa mattis sem, at interdum magna augue eget diam.
    Vestibulum ante ipsum primis in faucibus orci luctus 
    et ultrices posuere cubilia Curae; Morbi lacinia molestie
    dui. Praesent blandit dolor. Sed non quam. In vel mi sit
    amet augue congue elementum. Morbi in ipsum sit amet pede 
    facilisis laoreet. Donec lacus nunc, viverra nec, blandit 
    vel, egestas et, augue. Vestibulum tincidunt malesuada 
    tellus. Ut ultrices ultrices enim. Curabitur sit amet
    mauris. Morbi in dui quis est pulvinar ullamcorper.

Another Code Here

Blah Blah Blah!!!

<code goes here>