css 滚动条样式

文章并非原创,参考网站找不到了

效果:

css:

/* vertical scroll bar */
.vert_scrollable::-webkit-scrollbar{
   10px;
  height: 1px;
}
 
/* :horizontal scroll bar */
.content_container::-webkit-scrollbar {
   1px;
  height: 10px;
}
 
.vert_scrollable::-webkit-scrollbar-thumb
{

  border-radius: 10px;
  background-color: #28a745;
  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);
}
 
/* track of scroll bar */
.vert_scrollable::-webkit-scrollbar-track ,
{
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 10px;
}
 
原文地址:https://www.cnblogs.com/crdanding/p/12104235.html