Scroll Bar

Table of Contents

→ 参考 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 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

Date: 2021-03-09 Tue 09:48

Author: Jack Liu

Created: 2021-07-16 Fri 11:16

豫ICP备19900901号