【笔记】NexT8.8修改滚动条样式

发表于 更新于 阅读次数：

前言

NexT8.8修改滚动条样式为彩虹色🌈

修改样式

修改主题配置文件

  • 打开注释
_config.next.yml
1
2
custom_file_path:
  style: source/_data/styles.styl

配置自定义样式

  • 创建（或修改）hexo/source/_data/styles.styl文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 滚动条样式
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #f5f5f5;
  border-radius: 15px
}
::-webkit-scrollbar {
  width: 15px;
  background-color: #f5f5f5
}
::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f1ccb8),color-stop(0.1,#f1f1b8),color-stop(0.2,#b8f1ed),color-stop(0.3,#b8f1cc),color-stop(0.4,#CDDC39),color-stop(0.5,#e7dac9),color-stop(0.6,#FFC107),color-stop(0.7,#dcff93),color-stop(0.8,#b7d28d),color-stop(0.9,#f2debd))
}

完成