自定义滚动条样式 -webkit-scrollbar

忘是亡心i 2024-03-30 09:35 86阅读 0赞

![b91b68aa715b47b5bb874d8eec488176.png][]

<div class="test">
        <div class="scrollbar"></div>
    </div>

.test {
        width: 800px;
        height: 200px;
        overflow: auto;
    }
    
    .scrollbar {
        width: 1000px;
        height: 300px;
        margin: 0 auto;
    }
    
    /*滚动条整体粗细样式*/
    ::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 8px;
        height: 8px;
    }
    
    /*滚动条里面小方块*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px !important;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
        /* 颜色 */
        /* background:#b6b6b6!important; */
        /* 线性渐变背景 */
        background-image: linear-gradient(45deg, #ffbd61 25%,#ffbd61 25%, #ff8800 25%, #ff8800 50%,#ffbd61 50%, #ffbd61 75%, #ff8800 75%, #ff8800 100%)!important;
    }
    
    /*滚动条轨道*/
    ::-webkit-scrollbar-track {
        border-radius: 10px !important;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
        background: #EDEDED !important;
    }

[b91b68aa715b47b5bb874d8eec488176.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/93915fa958464190a85a1d6bc88620d7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义滚动条的样式

*核心代码： ** /* 设置滚动条整体部分的样式 */ ::-webkit-scrollbar { /* ...

墨蓝/ 2024年04月18日 17:25/ 0 赞/ 89 阅读

相关自定义滚动条样式 -webkit-scrollbar

![b91b68aa715b47b5bb874d8eec488176.png][] <div class="test"> <div class="sc

忘是亡心i/ 2024年03月30日 09:35/ 0 赞/ 87 阅读

相关 css 自定义滚动条样式

总是记不住这几个修改滚动条的伪类，抄过来记录一下：你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar

客官°小女子只卖身不卖艺/ 2023年07月20日 13:59/ 0 赞/ 42 阅读

相关 CSS3自定义滚动条样式

自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下：滚动条组成部分 1. ::-webkit-scrollbar 滚动

心已赠人/ 2023年06月15日 11:06/ 0 赞/ 37 阅读

相关 Qt 自定义滚动条样式

　　今天是时候把软件中的进度条给美化美化了，最初的想法就是仿照QQ。先前的进度条是这样![11163913-081132ea578649779a333310e

傷城~/ 2022年08月04日 04:18/ 0 赞/ 333 阅读

相关 css自定义滚动条样式

代码 css自定义滚动条样式，webkit内核浏览器。 / 滚动条样式 / ::-webkit-scrollbar { / 滚动条的宽度 / width

偏执的太偏执、/ 2022年05月25日 11:05/ 0 赞/ 314 阅读

相关自定义浏览器滚动条样式

感谢刘洋的分享[https://www.lyblog.net/detail/314.html][https_www.lyblog.net_detail_314.html]

我不是女神ヾ/ 2022年05月20日 06:27/ 0 赞/ 430 阅读

相关自定义滚动条样式-transition无效

问题需求是自定义滚动条样式，然后2秒内无操作隐藏滚动条。 2s内隐藏比较麻烦，不能用css实现，只能监听容器的touch事件，然后给滚动条加个opacity: 0的cl

朱雀/ 2022年04月17日 07:12/ 0 赞/ 556 阅读

相关自定义滚动条样式

/ 滚动条的宽度 / ::-webkit-scrollbar { width: 7px; height: 7px; }

迷南。/ 2022年02月26日 09:35/ 0 赞/ 405 阅读

相关自定义滚动条样式

::-webkit-scrollbar //滚动条整体部分 ::-webkit-scrollbar-button //滚动条两端的按钮 ::-webkit-scroll

骑猪看日落/ 2022年01月14日 13:17/ 0 赞/ 459 阅读