修改滚动条样式

最新推荐文章于 2024-01-11 15:47:54 发布

hx_1199

最新推荐文章于 2024-01-11 15:47:54 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/hx_1199/article/details/80419062

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

先说下布局吧

一个固定大小的盒子，里面装着所有数据的盒子

 <div class="List">
      <div class="allData"> 
      <ul v-for="(item,id) in items" v-bind:key="id">
         <li><img src="../../../assets/images/star.png" style="float:left;display:inline-block;margin-top:15px;margin-left:20px;">{{item.trade}}</li>
         <li>{{item.price}}</li>
         <li>{{item.riseFall}}</li>
         <li>{{item.volume}}</li>
         <li>{{item.max}}</li>
         <li>{{item.min}}</li>
      </ul>
      </div>
    </div>

来接下来样式：

.List {
  width: 100%;
  height: 329px;
  overflow: auto;
  position: relative;
  .allData {
    transition: top 1.5s;
    width: 100%;
    position: absolute;
    top: 0;
    :hover {
      background-color: rgba(32, 35, 44, 1);
    }
    ul {
      width: 100%;
      height: 46px;
      border-bottom: 1px solid rgba(78, 89, 133, 1);
      li {
        float: left;
        width: 16.65%;
        text-align: center;
        font-size: 16px;
        line-height: 46px;
      }
    }
  }
}

接下来修改滚动条的默认样式：

/*滚动条样式*/
.List::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.List::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #06c5d2;
}
.List::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

结果：