自定义滚动条样式 -webkit-scrollbar

忘是亡心i 2024-03-30 09:35 136阅读 0赞

b91b68aa715b47b5bb874d8eec488176.png

  1. <div class="test">
  2.     <div class="scrollbar"></div>
  3. </div>
  5. .test {
  6.     width: 800px;
  7.     height: 200px;
  8.     overflow: auto;
  9. }
  11. .scrollbar {
  12.     width: 1000px;
  13.     height: 300px;
  14.     margin: 0 auto;
  15. }
  17. /*滚动条整体粗细样式*/
  18. ::-webkit-scrollbar {
  19.     /*高宽分别对应横竖滚动条的尺寸*/
  20.     width: 8px;
  21.     height: 8px;
  22. }
  24. /*滚动条里面小方块*/
  25. ::-webkit-scrollbar-thumb {
  26.     border-radius: 10px !important;
  27.     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  28.     /* 颜色 */
  29.     /* background:#b6b6b6!important; */
  30.     /* 线性渐变背景 */
  31.     background-image: linear-gradient(45deg, #ffbd61 25%,#ffbd61 25%, #ff8800 25%, #ff8800 50%,#ffbd61 50%, #ffbd61 75%, #ff8800 75%, #ff8800 100%)!important;
  32. }
  34. /*滚动条轨道*/
  35. ::-webkit-scrollbar-track {
  36.     border-radius: 10px !important;
  37.     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  38.     background: #EDEDED !important;
  39. }

发表评论

表情：
评论列表 （有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读