css滚动体条样式修改，鼠标悬浮在滚动条上时滚动条失去颜色问题解决

零OO

于 2025-02-12 16:33:44 发布

阅读量375

点赞数 6

分类专栏：前端 css 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/qq_39111074/article/details/145594099

版权

自定义滚动条样式方法

如果需要滚动条默认情况下不展示，鼠标悬浮到滚动区域时再展示，可以设置滚动槽和滚动方块的颜色为透明的，给滚动元素添加鼠标悬浮时的滚动方块样式

::-webkit-scrollbar - - - 可以设置滚动条的宽度
::-webkit-scrollbar-track - - - 可以设置滚动槽的样式
::-webkit-scrollbar-thumb - - - 可以设置滚动方块的样式
*:hover::-webkit-scrollbar-thumb - - - 可以设置鼠标悬浮在滚动区域时滚动方块的样式

/* 自定义滚动条 */
::-webkit-scrollbar {
   
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
   
  background: transparent;
}

::-webkit-scrollbar-thumb {
   
  background: transparent

最低0.47元/天解锁文章