css 定义滚动条样式

小灰灰 2021-07-25 02:54 567阅读 0赞

在使用了overflow产生滚动条的选择器里,只对谷歌浏览器有效
    	
    选择器::-webkit-scrollbar 滚动条整体部分
    	设置display:none;可隐藏滚动条
    选择器::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    选择器::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
    选择器::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    选择器::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
    选择器::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
    选择器::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
    
    当::-webkit-scrollbar后,默认样式就会消失,需要自己定义
    	
    	这三个即可自定义圆角滚动条样式
    	::-webkit-scrollbar
    	::-webkit-scrollbar-thumb
    	::-webkit-scrollbar-track

[demo地址][demo]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]代码示例:

.search{ 
    	...
    }
    .search::-webkit-scrollbar { 
        width: 8px;
        background-color:#F5F5F5;
    }
    .search::-webkit-scrollbar-thumb { 
        border-radius: 10px;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)), color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148)));
    }
    .search::-webkit-scrollbar-track { 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #F5F5F5;
        border-radius: 10px;
    }

[demo]: https://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/88e46af16c2f4d90bb53074e19446e1e.png