webkit浏览器自定义滚动条样式代码

最新推荐文章于 2025-07-14 20:23:42 发布

转载最新推荐文章于 2025-07-14 20:23:42 发布 · 2k 阅读

web前端Jquery/Js/Html/Css 专栏收录该内容

64 篇文章

订阅专栏

本文介绍如何使用CSS定制滚动条的样式，包括滚动条的宽度、轨道样式、滑块的形状和颜色等。针对不同状态（如鼠标悬停、窗口未激活）提供了不同的样式设置。

/*滚动条宽度*/  
::-webkit-scrollbar {  
    width: 8px;  
}  
   
/* 轨道样式 */  
::-webkit-scrollbar-track {  
  
}  
   
/* Handle样式 */  
::-webkit-scrollbar-thumb {  
    border-radius: 10px;  
    background: rgba(0,0,0,0.2);   
}  
  
/*当前窗口未激活的情况下*/  
::-webkit-scrollbar-thumb:window-inactive {  
    background: rgba(0,0,0,0.1);   
}  
  
/*hover到滚动条上*/  
::-webkit-scrollbar-thumb:vertical:hover{  
    background-color: rgba(0,0,0,0.3);  
}  
/*滚动条按下*/  
::-webkit-scrollbar-thumb:vertical:active{  
    background-color: rgba(0,0,0,0.7);  
}

效果