Vue3 ，html 修改滚动条样式

最新推荐文章于 2025-02-24 10:30:00 发布

原创最新推荐文章于 2025-02-24 10:30:00 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript #css #css3

该代码段展示了如何使用WebKit特定的CSS伪元素来定制网页的滚动条，包括设置宽度、高度、背景色、边框圆角以及鼠标悬停时的颜色变化，以提升界面的视觉效果。

/* 滚动条 */
body *::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}
body *::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 2px;
}
body *::-webkit-scrollbar-thumb {
  background: rgb(205, 206, 206);

  border-radius: 10px;
}
body *::-webkit-scrollbar-thumb:hover {
  background: #333;
}
body *::-webkit-scrollbar-corner {
  background: #fff;
}