支持-webkit-前缀的浏览器,设置自定义滚动条

最新推荐文章于 2023-09-22 09:09:37 发布

原创最新推荐文章于 2023-09-22 09:09:37 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍了如何使用CSS为支持-webkit-前缀的浏览器定制滚动条的样式，包括设置滚动条的宽度、拖动条的颜色和背景槽的颜色，以实现更美观的用户体验。

/*自定义滚动条（支持-webkit-前缀的浏览器）*/ 
::-webkit-scrollbar{ /*滚动条宽度*/
  width: 8px; height: 8px;
}
::-webkit-scrollbar-thumb{ /*拖动条*/
  background-color: rgba(0,0,0,.3);
  border-radius: 6px;
}
::webkit-scrollbar-track{ /*背景槽*/
  background-color: #ddd;
  border-radius: 6px;
}