自定义滚动条样式

    /*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        // background: #f77777;
    }

     /*定义两端按钮的样式,display:none可设置为不显示,也可以添加背景图片,颜色*/
    ::-webkit-scrollbar-button {
        display: none;
        background: #ffee07;

    /*外层轨道,定义滚动条的轨道颜色、内阴影及圆角。display:none可设置为不显示,也可以添加背景图片,颜色*/
    ::-webkit-scrollbar-track {
        background: #0988ff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(255, 238, 0, 0.3) inset;
    }

    /* 内层轨道,如果设置了会覆盖::-webkit-scrollbar-track的样式 */
    ::-webkit-scrollbar-track-piece {
        background: #aeddf8; // 蓝色
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 255, 221, 0.5) inset;
    }

    /*滚动条拖动的部分*/
    ::-webkit-scrollbar-thumb {
        background: #ff7c3f; // 橙色
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(251, 255, 0, 0.6) inset;
    }

    /*定义右下角汇合处的样式*/
    ::-webkit-scrollbar-corner {
        background: #ffffff;
    }

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值