css滚动条样式代码，实现一个渐变的滚动条

当一个网站上线，我们尽可能的需要保证样式的一致性，美化滚动条可以解决这个统一的问题，当然了，你一个绚丽的页面，肯定不想出现丑了吧唧的滚动条吧！ css滚动条样式代码，实现一个渐变的滚动条

滚动条

包含

滚动条包含下面7个元素:

• **::-webkit-scrollbar**：整个滚动条

• **::-webkit-scrollbar-button**：下下箭头按钮

• **::-webkit-scrollbar-thumb**：滚动滑块

• **::-webkit-scrollbar-track**：滚动条滑轨

• **::-webkit-scrollbar-track-piece**：滚动条没有滑块的轨道部分

• **::-webkit-scrollbar-corner**：横向滚动条与竖向滚动条的交汇处

• **::-webkit-resizer**：类似textarea的可拖动按钮

位置

在日常的使用中，我们经常见到的是右侧+下边滚动条。其实还有一种滚动条是位于左侧。主要是出现在RTL类型的网页中。

因为中文的书写方式是LTR 类型，所以滚动条在右边。

新语法？鸡肋

目前新语法，仅支持 scrollbar-color, scrollbar-width.无法自定义其他内容，个人觉得比较鸡肋。

div {
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
}

渐变的滚动条

定义滚动条容器

这里使用两个div。子div主要是用来保证父div可以出现滚动条。

父容器高度小于子元素高度：

   .scrollbar
        {
          height: 300px;
        }
   .child{
  min-height: 450px;
}

定义整个滚动条

 .scrollbar::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
        

定义滑块渐变

 .scrollbar::-webkit-scrollbar-thumb
        {
        border-radius:10px;
          background-image: -webkit-linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
        }

这里强烈推荐一个渐变色配色网站，可以生成代码：https://uigradients.com/。

滑轨加点圆角

.scrollbar::-webkit-scrollbar-track
        {
            border-radius: 10px;
           }

后记

因为只是为了解决公司的问题，目前对scrollbar，了解不深，后面感觉得深入了解一下。