The Lab | Scrollbar Decoration

The Laboratory

Thick Scrollbar

<style>
                        /* Scrollbar styling */
                        ::-webkit-scrollbar {
                            width: 20px;
                            /* Vertical Width */
                            height: 20px;
                            /* Horizontal Height */
                        }
                
                        /* Scrollbar Track Color */
                        ::-webkit-scrollbar-track {
                            background: #000;
                            border-radius: 0px;
                        }
                
                        /* Scrollbar Thumb Color */
                        ::-webkit-scrollbar-thumb {
                            background: #680202;
                            border-radius: 0px;
                            border: 2px solid #680202;
                        }
                
                        /* Thumb Hover */
                        ::-webkit-scrollbar-thumb:hover {
                            background: #ad0202;
                        }
                    </style>

Thin Scrollbar

<style>
                            /* Scrollbar styling */
                            ::-webkit-scrollbar {
                                width: 10px;
                                /* Vertical Width */
                                height: 10px;
                                /* Horizontal Height */
                            }
                    
                            /* Scrollbar Track Color */
                            ::-webkit-scrollbar-track {
                                background: transparent;
                                border-radius: 0px;
                            }
                    
                            /* Scrollbar Thumb Color */
                            ::-webkit-scrollbar-thumb {
                                background: transparent;
                                border-radius: 0px;
                                border: 2px solid #000000;
                            }
                    
                            /* Thumb Hover */
                            ::-webkit-scrollbar-thumb:hover {
                                background: transparent;
                            }
                        </style>

Rounded Scrollbar

<style>
                                /* Scrollbar styling */
                                ::-webkit-scrollbar {
                                    width: 15px;
                                    /* Vertical Width */
                                    height: 15px;
                                    /* Horizontal Height */
                                }
                        
                                /* Scrollbar Track Color */
                                ::-webkit-scrollbar-track {
                                    background: lightblue;
                                    border-radius: 10px;
                                }
                        
                                /* Scrollbar Thumb Color */
                                ::-webkit-scrollbar-thumb {
                                    background: blue;
                                    border-radius: 10px;
                                    border: 2px solid transparent;
                                }
                        
                                /* Thumb Hover */
                                ::-webkit-scrollbar-thumb:hover {
                                    background: cadetblue;
                                }
                            </style>

Only One Color Scrollbar

<style>
                                        /* Scrollbar styling */
                                        ::-webkit-scrollbar {
                                            width: 15px;
                                            /* Vertical Width */
                                            height: 15px;
                                            /* Horizontal Height */
                                        }
                                
                                        /* Scrollbar Track Color */
                                        ::-webkit-scrollbar-track {
                                            background: yellow;
                                            border-radius: 10px;
                                        }
                                
                                        /* Scrollbar Thumb Color */
                                        ::-webkit-scrollbar-thumb {
                                            background: yellow;
                                            border-radius: 0px;
                                            border: 2px solid transparent;
                                        }
                                
                                        /* Thumb Hover */
                                        ::-webkit-scrollbar-thumb:hover {
                                            background: yellow;
                                        }
                                    </style>

Show Only on Hover Scrollbar

<style>
                                            /* Scrollbar styling */
                                            ::-webkit-scrollbar {
                                                width: 10px;
                                                /* Vertical Width */
                                                height: 10px;
                                                /* Horizontal Height */
                                            }
                                    
                                            /* Scrollbar Track Color */
                                            ::-webkit-scrollbar-track {
                                                background: transparent;
                                                border-radius: 10px;
                                            }
                                    
                                            /* Scrollbar Thumb Color */
                                            ::-webkit-scrollbar-thumb {
                                                background: transparent;
                                                border-radius: 0px;
                                                border: 2px solid transparent;
                                            }
                                    
                                            /* Thumb Hover */
                                            ::-webkit-scrollbar-thumb:hover {
                                                background: palevioletred;
                                            }
                                        </style>