1. 程式人生 > >不依靠外掛自定義滾動條

不依靠外掛自定義滾動條

直接上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;
}