滚动条美化

淡淡的烟草味﹌ 2024-04-07 12:26 68阅读 0赞

#### 滚动条美化1 ####

body {
        
                height: 2000px;
                width: 1000px;
            }
    
            ::-webkit-scrollbar {
        
                background-color: transparent;
                width: 10px;
                height: 10px;
            }
    
            ::-webkit-scrollbar-thumb {
        
                background-color: #50bfff;
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .4) 75%, transparent 0, transparent);
            }
    
            ::-webkit-scrollbar-track {
        
                border-radius: 2em;
            }

See the Pen [ 滚动条美化1][_1] by qianhuiya ( [@quinhua][quinhua]) on [CodePen][].

#### 滚动条美化2 ####

body {
        
                height: 1000px;
                width: 1000px;
            }
            ::-webkit-scrollbar {
        
                background-color: transparent;
                width: 10px;
                height: 10px;
            }
            ::-webkit-scrollbar-thumb {
        
                background-image: linear-gradient(180deg, #d0368a 0%, #708ad4 99%);
                box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
            }

See the Pen [ 滚动条美化3][_3] by qianhuiya ( [@quinhua][quinhua]) on [CodePen][].

#### 滚动条美化3 ####

body {
        
                width: 2000px;
                height: 2000px;
            }
    
            ::-webkit-scrollbar {
        
                background-color: transparent;
                width: 10px;
                height:10px;
            }
    
            ::-webkit-scrollbar-thumb {
        
                /* 无滚动时隐藏 */
                /* background-color: transparent; */
                /* 无滚动颜色变浅 */
                background-color: rgba(80, 191, 255, 0.5);
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .4) 75%, transparent 0, transparent);
            }
    
            ::-webkit-scrollbar-track {
        
                background: none;
                border-radius: 2em;
            }
    
            body[scroll]::-webkit-scrollbar-thumb,
            ::-webkit-scrollbar-thumb:hover {
        
                background-color: rgba(80, 191, 255, 1);
                background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, .4) 0, rgba(255, 255, 255, .4) 75%, transparent 0, transparent);
            }

window.addEventListener('scroll', function (ev) {
        
        document.body.toggleAttribute('scroll', true)
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
        
            document.body.toggleAttribute('scroll')
        }, 200)
    })

See the Pen [ 滚动条美化2][_2] by qianhuiya ( [@quinhua][quinhua]) on [CodePen][].

[_1]: https://codepen.io/quinhua/pen/wvmOzZN
[quinhua]: https://codepen.io/quinhua
[CodePen]: https://codepen.io
[_3]: https://codepen.io/quinhua/pen/qBovqrx
[_2]: https://codepen.io/quinhua/pen/XWEGNbN