前端 滚动条样式

不废话上代码之【滚动条样式】 

定义的盒子

.zzl-gdt{
padding-top: 15px;
height: 400px;
margin: 0 auto;
 overflow: hidden;
transition: all 0.3s;
}
.zzl-gdt::-webkit-scrollbar {
  width: 7px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
.zzl-gdt::-webkit-scrollbar {
  background-color: #49b1f5;
  /* 关键代码 */
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
  border-radius: 32px;
}

/* 滚动条轨道 */
.zzl-gdt::-webkit-scrollbar {
  background-color: #dbeffd;
  border-radius: 32px;
}

.zzl-gdt::-webkit-scrollbar-thumb {
  background   : #ddd;
  transition: background 1s;

}
.zzl-gdt::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #ffffff;
}

.zzl-gdt:hover{
  overflow: auto;
}

//滚动条
.statisticsMian::-webkit-scrollbar {
  width: 5px;
  height: 10px;
}

/* 滚动条上的滚动滑块 */
.statisticsMian::-webkit-scrollbar-thumb {
  background-color: #000ddd;
  /* 关键代码 */
  background-image: -webkit-linear-gradient(45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent);
  border-radius: 32px;
}

/* 滚动条轨道 */
.statisticsMian::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}
​​​​​​​

.statisticsMian {
  height: 500px;
  margin-top: 20px;
  margin-left: 10px;
  overflow-y: auto;
  overflow-x: hidden;

}