浏览器滚动条css设置webkit-scrollbar样式方式

样式代码示例

  body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  body::-webkit-scrollbar:horizontal {
    border-top: 1px solid #efefef;
  }
  body::-webkit-scrollbar:vertical {
    border-left: 1px solid #efefef;
  }

  body::-webkit-scrollbar-thumb {
    background-color: rgba(14,133,252,1);
    border-radius: 15px;
  }

  body::-webkit-scrollbar-track-piece {
    background-color: rgba(14,133,252,.2);
  }

参数的说明把参考地址看完后,你就会了。

参考地址

MDN --webkit-scrollbar-xxx 滚动条设置样式
对滚动条样式设置的详细可用参数

posted @ 2022-10-13 15:45  星小梦  阅读(553)  评论(0编辑  收藏  举报