Scroll Bar

简介
修改某个元素的滚动条
修改浏览器默认滚动条样式
总结

→ 参考 https://www.cnblogs.com/wjw1014/p/13564175.html

简介

浏览器的默认滚动条往往都不怎么好看…… 让我们对它来做一些调整吧！

假如我们页面的页面是这样的：

 1: <!DOCTYPE html>
 2: <html lang="en">
 3:     <head>
 4:         <meta charset="UTF-8" />
 5:         <title>滚动条样式</title>
 6:     </head>
 7:     <body>
 8:         <div id="div__scroll-bar">...</div>
 9:         <div>...</div>
10:     </body>
11: </html>

修改某个元素的滚动条

 1: /* 设置一个元素的宽高（以使其内容滚动） */
 2: #div__scroll-bar {
 3:     width: 300px;
 4:     height: 200px;
 5:     border: 1px solid red;
 6: 
 7:     overflow: scroll;
 8: }
 9: 
10: /* 滚动条整体部分（width 纵向滚动条  height 横向滚动条） */
11: #div__scroll-bar::-webkit-scrollbar {
12:     width: 10px;
13:     height: 10px;
14: }
15: /* 滚动条的轨道（里面装有 Thumb） */
16: #div__scroll-bar::-webkit-scrollbar-track {
17:     background-color: #afa;
18: }
19: /* 内层轨道，滚动条中间部分（除去两侧用于微调的 button 和交汇区） */
20: #div__scroll-bar::-webkit-scrollbar-track-piece {
21:     background-color: #f00;
22: }
23: /* 滚动条里面的小方块 */
24: #div__scroll-bar::-webkit-scrollbar-thumb {
25:     background-color: pink;
26:     border-radius: 10%;
27:     -webkit-box-shadow: inset 0 0 5px #880d0d;
28: }
29: 
30: #div__scroll-bar::-webkit-scrollbar-thumb:hover {
31:     background: #333;
32: }
33: /* 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置 */
34: #div__scroll-bar::-webkit-scrollbar-button {
35:     background-color: rgb(22, 182, 27);
36:     /* display: none; */
37: }
38: /* 边角，即两个滚动条的交汇处 */
39: #div__scroll-bar::-webkit-scrollbar-corner {
40:     background: #179a16;
41: }

修改浏览器默认滚动条样式

 1: /* 整个滚动条 */
 2: ::-webkit-scrollbar {
 3:   width: 5px;
 4:   height: 5px;
 5: }
 6: 
 7: /* 滚动条有滑块的轨道部分 */
 8: ::-webkit-scrollbar-track-piece {
 9:   background-color: transparent;
10:   border-radius: 5px;
11: }
12: 
13: /* 滚动条滑块(竖向:vertical 横向:horizontal) */
14: ::-webkit-scrollbar-thumb {
15:   cursor: pointer;
16:   background-color:#bbb;
17:   border-radius: 5px;
18: }
19: 
20: /* 滚动条滑块hover */
21: ::-webkit-scrollbar-thumb:hover {
22:   background-color: #999;
23: }
24: 
25: /* 同时有垂直和水平滚动条时交汇的部分 */
26: ::-webkit-scrollbar-corner {
27:   display: block;    /* 修复交汇时出现的白块 */
28: }

总结

参数	说明
`::-webkit-scrollbar`	滚动条整体部分
`::-webkit-scrollbar-track`	滚动条的轨道
`::-webkit-scrollbar-thumb`	滚动条里面的小方块
`::-webkit-scrollbar-button`	滚动条的轨道的两端微调按钮
`::-webkit-scrollbar-track-piece`	内层轨道，滚动条中间部分
`::-webkit-scrollbar-corner`	边角，即两个滚动条的交汇处
`::-webkit-resizer`	两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

Scroll Bar

Table of Contents

简介

修改某个元素的滚动条

修改浏览器默认滚动条样式

总结