神奇的滚动条

今天药忘吃喽~ 2022-11-15 14:07 146阅读 0赞

我在这里整理了好几个滚动条，因为浏览器原生的滚动条样式，真的不是很好看。  
![在这里插入图片描述][20210401172139978.png]

1.第一个（代码部分）：

::-webkit-scrollbar { 
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-track { 
        background-color:#F5F5F5;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }
    ::-webkit-scrollbar-thumb { 
        background-color:#c8c8c8;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        border-radius:2em;
    }

效果部分：  
![在这里插入图片描述][20210401170912853.png]  
2.第二个（代码部分）：

::-webkit-scrollbar { 
        /*整体样式*/
        width: 10px; 
        height: 2px;
    }
      ::-webkit-scrollbar-track { 
        /*轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ededed;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb { 
        /*滚动条小方块*/
        border-radius: 10px;
        background-color: #2e75d3;
        background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.2) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.2) 50%,
          rgba(255, 255, 255, 0.2) 75%,
          transparent 75%,
          transparent
        );
    }

效果部分：  
![在这里插入图片描述][20210401171148228.png]  
3.第三个（代码部分）：

::-webkit-scrollbar { 
        width : 10px; 
        height: 1px;
    }
    ::-webkit-scrollbar-thumb {  
        border-radius: 10px;
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #535353;
    }
    ::-webkit-scrollbar-track {  
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background   : #ededed;
    }

效果部分：  
![在这里插入图片描述][20210401171424158.png]  
4.第四个（代码部分）：

::-webkit-scrollbar-track
    { 
        background: rgba(0,0,0,.1);
        border-radius: 0;
    }
    ::-webkit-scrollbar
    { 
        -webkit-appearance: none;
        width: 8px;
        height: 10px;
    }
    ::-webkit-scrollbar-thumb
    { 
        cursor: pointer;
        border-radius: 5px;
        transition: color .2s ease;
        background-image: linear-gradient(aquamarine,#fd7286,lightgreen);
    }

效果部分：  
![在这里插入图片描述][20210401171646664.png]  
5.第五个（代码部分）：

::-webkit-scrollbar { 
        width : 10px;
        height: 1px;
    }
    ::-webkit-scrollbar-thumb { 
        border-radius   : 10px;
        background-color: skyblue;
        background-image: -webkit-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
        );
    }
    ::-webkit-scrollbar-track { 
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #ededed;
        border-radius: 10px;
    }

效果部分：  
![在这里插入图片描述][2021040117190252.png]  
好了。就先整理这么多吧，后续如果有更好看的，会再加在里面的。  
![在这里插入图片描述][20210401172341252.png]

[20210401172139978.png]: /images/20221022/28ebba39cf9049cd83a37e781971f8aa.png
[20210401170912853.png]: /images/20221022/e514c7ab5f2f45d39236c7d71de8f067.png
[20210401171148228.png]: /images/20221022/9663f1da81df4dac95522e11ae18b6f1.png
[20210401171424158.png]: /images/20221022/965158e6c2bd4d46a6c8226878898f7d.png
[20210401171646664.png]: /images/20221022/aafd02e93a9447b7a7c2afaffdfeb6b5.png
[2021040117190252.png]: /images/20221022/da7d6e300afd456981337aa1553860c5.png
[20210401172341252.png]: /images/20221022/0049f7e8fee7400eaf566a236e9880ab.png