自定义滚动条样式

Lee_Yu_Fan

于 2024-01-23 15:42:59 发布

阅读量450

点赞数 8

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/m0_73334325/article/details/135773337

代码实现：

// 滚动条样式
::-webkit-scrollbar{
  // 滚动条整体样式
  width: 0.06rem;
  height: 0.01rem;
  padding-left: 0.05rem;
}
::-webkit-scrollbar-thumb{
  // 滚动条里面的小方块样式
  border-radius: 0.1rem;
  background-color: #b8d5fb;
}
::-webkit-scrollbar-track{
  // 设置滚动条轨道的样式
  border-radius: 0.08rem;
  background: #fff;
  box-shadow: inset 0 0 0.03rem rgba(0,0,0,0.2);
}

效果：

例：

代码：

<div class="test">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

//css
 .test{
    height: 100px;
  &n