不依靠插件自定义滚动条

直接上css即可 给添加滚动条的标签加上类名

隐藏自带滚动条  添加伪元素替换样式

/* 给滚动条标签添加类名 scroll-style */
.scroll-style {
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-style::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.scroll-style::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  width: 4px;
  background: transparent;
}

.scroll-style::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0;
  width: 10px;
  background-color: transparent;
}

.scroll-style:hover {
  overflow-y: auto;
}

.scroll-style:hover::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}

.scroll-style:hover::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  width: 4px;
  background: #c0c0c0;
}

.scroll-style:hover::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 0;
  width: 10px;
  background-color: transparent;
}

猜你喜欢

转载自blog.csdn.net/qq_37818095/article/details/84818891