全面的自定义Chrome滚动条样式，立即使用

最新推荐文章于 2024-12-16 09:06:24 发布

代码唐

最新推荐文章于 2024-12-16 09:06:24 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： scrollbar chrome css

本文链接：https://blog.youkuaiyun.com/weixin_39703282/article/details/88392523

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一段专门用于Chrome浏览器的CSS代码，该代码能够自定义滚动条的外观，包括基本样式及拖动时的颜色变化，为网页设计提供更丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码是针对chrome浏览器自定义scrollbar的效果，以下代码实现效果比较全面，除了实现基本外观样式，还加入了一般网站没采用的拖动时改变滑块颜色效果。

::-webkit-scrollbar-track-piece{width:8px;background-color: rgba(28, 36, 56, 0.7);border-radius: 8px;  }

::-webkit-scrollbar{width:8px;height:6px ;border-radius: 8px; }

::-webkit-scrollbar-thumb{height:6px;background:#625840;border-radius: 8px;   cursor:pointer;}
::-webkit-scrollbar-thumb:window-inactive {
    background: #625840;
}
::-webkit-scrollbar-corner {
    background: rgba(28, 36, 56, 0.7);
}
::-webkit-scrollbar-thumb:hover{background: #796c4f;}
::-webkit-scrollbar-thumb:active{background:#958867;}

效果图