滚动条美化-蒲公英云

滚动条美化

滚动条美化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 by qianhuiya ( @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 by qianhuiya ( @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)
})