个性化、美化、自定义网页滚动条

个性化、美化、自定义网页滚动条

效果图：

直接上代码（直接在CSS里添加即可）：

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: #1f9ae6;
  background-image: linear-gradient(0deg, #1f9ae6 0%, #00cfd8 80%, #e4e4e4 100%);

  /* 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
  ); */
  }
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 10px rgb(0 0 0 / 10%);
  background   : #ededed;
  /* border-radius: 10px; */
  }