css设置滚动条样式

约定不等于承诺〃 2022-12-28 08:00 169阅读 0赞

# css设置滚动条样式 #

先看效果图

![70][]

附上效果图代码：

1. `1.style部分`
2. `<style>`
3. `/*定义滚动条样式（高宽及背景）*/`
4. `::-webkit-scrollbar {`
5. `width: 6px; /* 滚动条宽度， width：对应竖滚动条的宽度 height：对应横滚动条的高度*/`
6. `background: #007acc;`
7. `}`
8. `/*定义滚动条轨道（凹槽）样式*/`
9. `::-webkit-scrollbar-track {`
10. `-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 较少使用 */`
11. `border-radius: 3px;`
12. `}`
13. `/*定义滑块 样式*/`
14. `::-webkit-scrollbar-thumb {`
15. `border-radius: 3px;`
16. `height: 100px; /* 滚动条滑块长度 */`
17. `background-color: #ccc;`
18. `}`
19. `</style>`
20.  
21. `2.body部分`
22. `<div style="height: 200px;overflow-y: scroll;background: #52cc8f;">`
23. `11111111`
24. `11111111111111111111`
25. `11111111111111111111`
26. `11111111111111111111`
27. `11111111111111111111`
28. `11111111111111111111`
29. `11111111111111111111`
30. `11111111111111111111`
31. `11111111111111111111`
32. `11111111111111111111`
33. `11111111111111111111`
34. `</div>`

最后，总结 一个滚动条的组成部分(通常设置前三个即可)：

*  **::-webkit-scrollbar 滚动条整体部分**
 *  **::-webkit-scrollbar-thumb**  **滚动条里面的小方块（即滚动条滑块）**，能向上向下移动（或横向滚动条可往左往右移动）
 *  **::-webkit-scrollbar-track  滚动条的轨道**（对应上图**滚动条凹槽**，里面装有Thumb，即滚动条滑块）
 *  ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置
 *  ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
 *  ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
 *  ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

[70]: /images/20221120/e8d0d47a38be4eb5b76cddb258c5930b.png