自定义滚动条

滚动条参考文章：https://www.cnblogs.com/xiaohuochai/p/5294409.html

过渡色参考文章：http://color.oulu.me/](http://color.oulu.me/)

核心代码：

css

/*
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动滑块
::-webkit-scrollbar-track 底层轨道
::-webkit-scrollbar-track-piece 内层轨道
::-webkit-scrollbar-corner 边角
::-webkit-scrollbar-button 两端按钮
*/
html,body, div, ul, section {
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
  }
  // 底层轨道
  &::-webkit-scrollbar-track {
    background-color: #F5F5F5;
    border-radius: 10px;
  }
  // 滚动滑块
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#a18cd1), to(#fbc2eb), color-stop(.6, #54DE5D));
    // background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#cdc0eb), to(#b895ae), color-stop(.6, #d3ecd5));
  }
  // 添加hover指示
  &::-webkit-scrollbar-thumb:hover {
    background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#9479d3), to(#fca5e3), color-stop(.6, #2fdf3b));
  }
}

父盒子固定高度，设置伪元素属性即可。代码说明见上面链接地址

自定义滚动条 ​

自定义滚动条