Hexo-自定义滚动条

自定义滚动条1

效果见右侧滚动条(不支持Firefox和Internet Explorer)

  1. 在博客目录\themes\fluid\source\css中新建scrollbar.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar {  
    width: 4px;  
    height: 4px;  
    background-color: #181C27;    
}  
 
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track {  
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #181C27;
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb {  
    border-radius: 10px;  
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    background-color: #AAA;  
}

/*鼠标在滑块上方时滑块变色*/  
::-webkit-scrollbar-thumb:hover {
    background-color: #808080;
}
Copy
  1. 在Fluid主题配置文件中添加自定义CSS(195行处)
custom_css:
  - /css/scrollbar.css
``