谷歌浏览器css设置滚动条

最新推荐文章于 2025-06-20 00:30:00 发布

翻译最新推荐文章于 2025-06-20 00:30:00 发布 · 3.8k 阅读

css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用CSS来定制滚动条样式的详细方法，包括如何为谷歌浏览器设置滚动条的宽度、高度、背景颜色以及滚动条轨道、滑块按钮等元素的样式。

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

效果:

代码

/*滚动条样式：谷歌浏览器下*/
::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background-color: #f5f7fa;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
  /*box-shadow: inset 0 0 5px rgba(0,0,0,.3);*/
  background-color: #f5f7fa;

}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #e4e7ed;
  /*box-shadow: inset 0 0 5px #000;*/
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
  height: 0px;
  background-color: #B0AEDA;
}
.el_tableDiv{
  height: 420px;
  overflow-y:auto;
}
/**设置滚动条宽度 */
/*::-webkit-scrollbar{width:0px;height: 0px}*/