浏览器滚动条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 @   星小梦  阅读(563)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示