自定义滚动条样式

.xxxxxx::-webkit-scrollbar {
    width: 4px;
    height: 1px;
}
/*滚动条滑块*/
.xxxxxx::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    /*background: #535353;*/
    background-color: rgba(16, 42, 91, 0.6);
}
/*滚动条轨道*/
.xxxxxx::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background: #ccc;
}

xxxxxx指代的是包含滚动条的父级容器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发...
    65_刘璐阅读 9,693评论 1 4
  • 原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,...
    楼心漫阅读 39,422评论 5 31
  • 现在正在重构一个已经有的后管项目,今天看到这个滚动条实在是有点丑,想给换一下。实话说自己并不是一个很有经验的前端开...
    蚊子爸爸阅读 2,204评论 2 12
  • 哪些地方会出现滚动条 滚动条通常会出现在这些地方 1、iframe 2、任何元素的设置成块元素,overflow设...
    超爱吃小龙虾阅读 1,026评论 0 2
  • ::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background...
    而生lhw阅读 637评论 0 0

友情链接更多精彩内容