overflow产生的滚动条样式修改

最新推荐文章于 2024-05-18 03:07:39 发布

网猴

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量515

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/Z_kenshou/article/details/129669852

版权

通过添加伪元素设置

&::-webkit-scrollbar {
	// 滚动条整体样式
	// 高宽分别对应横竖滚动条的尺寸
}

&::-webkit-scrollbar-thumb {
    // 滚动条里面小方块
}

&::-webkit-scrollbar-track {
   // 滚动条底层颜色
}

例子：

// html
<div class='timeline-scroll-box'>

// css
.timeline-scroll-box{
	overflow-x: scroll;
}
// 滚动条整体样式
.timeline-scroll-box::-webkit-scrollbar {
  // 高宽分别对应横 竖滚动条的尺寸
  width: 8px;
  height: 8px;
}
// 滚动条里面小方块
.timeline-scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
// 滚动条底层颜色
.timeline-scroll-box::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

在这里插入图片描述
实现出来就是这个样子颜色可以自己改