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