Chrome浏览器滚动条样式设置

最新推荐文章于 2025-03-16 14:44:56 发布

Maximus_ckp

最新推荐文章于 2025-03-16 14:44:56 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/Maximus_ckp/article/details/127392287

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS来定制滚动条的默认样式和鼠标悬停时的显示效果。通过设置`::-webkit-scrollbar`，`::-webkit-scrollbar-thumb`和`::-webkit-scrollbar-track-piece`选择器，可以改变滚动条的宽度、颜色、圆角以及鼠标悬停时的背景色，从而提升网页界面的用户体验。

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


/*---滚动条默认显示样式--*/ 

::-webkit-scrollbar-thumb{ 
  background-color:blue; 
  height:50px; 
  outline-offset:-2px; 
  outline:2px solid #fff; 
  -webkit-border-radius:4px; 
  border: 2px solid #fff; 
}
  
  /*---鼠标点击滚动条显示样式--*/ 
  
::-webkit-scrollbar-thumb:hover{ 
  background-color:red; 
  height:50px; 
  -webkit-border-radius:4px; 
}
  /*---滚动条大小--*/ 
::-webkit-scrollbar{ 
  width:8px; 
  height:8px; 
}
  /*---滚动框背景样式--*/ 
::-webkit-scrollbar-track-piece{ 
  background-color:yellow; 
  -webkit-border-radius:0; 
}

在这里插入图片描述