【CSS效果】滚动条样式修改

如题,如何通过CSS 代码调整滚动条样式?

答:使用 CSS 伪类选择器 ::-webkit-scrollbar

PS:::-webkit-scrollbar 仅仅在支持WebKit的浏览器可以使用

  • ::-webkit-scrollbar — 整个滚动条.
  • ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
  • ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
  • ::-webkit-scrollbar-track — 滚动条轨道
  • ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
  • ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>【CSS效果】滚动条样式修改</title>
  6. </head>
  7. <body>
  8. <div class=“main”>
  9. <div class=“content”></div>
  10. </div>
  11. </body>
  12. <style>
  13. *{
  14. margin: auto;
  15. border: none;
  16. padding: 0;
  17. }
  18. .main{
  19. width: 300px;
  20. height: 500px;
  21. margin: 100px auto;
  22. backgroundcolor: #eee;
  23. overflow: auto;
  24. }
  25. .main::-webkitscrollbar{ /* 整个滚动条 */
  26. width: 9px; /* 垂直滚动条高度 */
  27. height: 9px; /* 水平滚动条宽度 */
  28. }
  29. .main::-webkitscrollbartrack{ /* 滚动条轨道 */
  30. border: 1px solid #999;
  31. borderradius: 18px;
  32. background: royalblue;
  33. }
  34. .main::-webkitscrollbartrackpiece{ /* 滚动条没有滑块的轨道部分 */
  35. background: cyan; /* 该颜色会覆盖 -webkit-scrollbar-track 中的背景色*/
  36. }
  37. .main::-webkitscrollbarthumb{ /* 滚动条上的滚动滑块 */
  38. borderradius: 18px;
  39. background: #999;
  40. }
  41. .main::-webkitscrollbarthumb:hover{
  42. background: #aaa;
  43. }
  44. .main::-webkitscrollbarbutton{ /* 滚动条上的按钮 (上下箭头) */
  45. height: 80px; /* 垂直滚动条两端按钮高度 */
  46. width: 15px; /* 水平滚动条两端按钮宽度 */
  47. backgroundcolor: greenyellow;
  48. }
  49. .main::-webkitscrollbarcorner{ /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */
  50. backgroundcolor: orange;
  51. }
  52. .content{
  53. width: 2000px;
  54. height: 2000px;
  55. backgroundcolor: red;
  56. }
  57. </style>
  58. </html>

本文转载自:https://blog.quietguoguo.com/4121.html

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

Demo地址:http://demo.quietguoguo.com/css/【CSS效果】滚动条样式修改.html

人已赞赏
WordPress

themebetter全场主题6折优惠 (DUX主题活动价格480元)

2020-11-2 16:23:39

WordPress初缘的分享随手笔记

宝塔Nginx防火墙添加百度云加速节点IP地址段进白名单

2021-2-21 15:46:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索