跳动的滚动条-自定义css样式

要实现对滚动条样式的自定义，首先我们要先去了解滚动条。

1. 什么时候会出现

当内容超出容器时，容器就会出现滚动条。

2. 滚动条的样式属性

::-webkit-scrollbar – 整个滚动条

::-webkit-scrollbar-track – 滚动条的滚动区域（轨道）

::-webkit-scrollbar-thumb – 滚动条的可拖拽部分（滑块）

以下是可用但不常用的属性：

::-webkit-scrollbar-button – 滚动条两端的上/下（或左/右）按钮

::-webkit-scrollbar-track-piece – 滚动条轨道未被滑块覆盖的部分

::-webkit-scrollbar-corner – 垂直滚动条和水平滚动条交汇的部分

3. 自定义滚动条样式代替默认

/**
 * scrollbar style
 */
/*定义滚动条宽高+背景*/
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 10px;
  height: 10px;
  background: rgb(245, 247, 250);
}
/*滚动条里的拖动条圆角+背景*/
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #f0f0f0;
  transition: backgroundColor 0.3s ease;
}
/*鼠标移动到拖动条上改变颜色*/
::-webkit-scrollbar-thumb:hover {
  background-color: #bfc0c2;
}

当你把鼠标悬停在滑块上以及拖动滑块时它的颜色会变成更深的

4. 优化：为滚动条增加过渡动画效果

需要注意的重点是，鼠标悬停时改变滚动条的颜色很容易 ，但是大小并不能直接改变，在网上找了好久终于找到了合适的解决办法。

background-clip 属性

• 定义
  指定背景绘制区域。
• 语法
  background-clip: border-box|padding-box|content-box; | 值 | 说明 | | :---------- | :----------------------- | | border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 | | padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 | | content-box | 背景绘制在内容方框内（剪切成内容方框）。

::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background-color: #f0f0f0;
   border-style: dashed;
   border-color: transparent;
   /*横竖滚动条的高宽变化尺寸*/
   border-width: 2px;
   background-clip: padding-box;
 }

滚动条内的滑块设置background-clip: padding-box;背景将在内容和内边距区域，不会延伸到边框上，边框颜色改成透明。鼠标悬停时改变背景色就可以实现滚动条的动态效果了。