捲軸樣式

codejnp發表於2024-10-16
.scroll-wrapper::-webkit-scrollbar {
  /*捲軸整體樣式*/
  width: 6px; /*高寬分別對應橫豎捲軸的尺寸*/
  height: 1px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
  /*捲軸裡面小方塊*/
  border-radius: 10px;
  background: #fff;
}
.scroll-wrapper::-webkit-scrollbar-track {
  /*捲軸裡面軌道*/
  border-radius: 10px;
  background: #fff;
}
.scroll-wrapper:hover {
  &::-webkit-scrollbar-thumb {
    /*捲軸裡面小方塊*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d7d8dd;
  }
  &::-webkit-scrollbar-track {
    /*捲軸裡面小方塊*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
  }
}

相關文章