自定义滚动条样式

发布时间：2024年01月23日

?代码实现：

// 滚动条样式
::-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;
? ? overflow-y: scroll;
? }
? .test::-webkit-scrollbar{
? /*滚动条整体样式*/
? width : 10px; ?/*高宽分别对应横竖滚动条的尺寸*/
? height: 1px;
}
.test::-webkit-scrollbar-thumb {
? /*滚动条里面小方块*/
? border-radius ? : 10px;
? background-color: skyblue;
? background-image: -webkit-linear-gradient(
? ? ? 45deg,
? ? ? rgba(255, 255, 255, 0.2) 25%,
? ? ? transparent 25%,
? ? ? transparent 50%,
? ? ? rgba(255, 255, 255, 0.2) 50%,
? ? ? rgba(255, 255, 255, 0.2) 75%,
? ? ? transparent 75%,
? ? ? transparent
? );
}
.test::-webkit-scrollbar-track {
? /*滚动条里面轨道*/
? box-shadow ? : inset 0 0 5px rgba(0, 0, 0, 0.2);
? background ? : #ededed;
? border-radius: 10px;
}

?

?

文章来源:https://blog.csdn.net/m0_73334325/article/details/135773337
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章