---
# System prepended metadata

title: Custom SrollBar Style
tags: [實作 Style]

---

# Custom SrollBar Style
###### tags: `實作 Style`

## 結果
![](https://i.imgur.com/f9Ow9TA.png)

## CSS Code
```
.scrollbar::-webkit-scrollbar {
    width: 14px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-track {            
    border-radius: 5px;
    background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;        
    background-color: #6cdbbcc7;
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent)
}

/* Scroll Bar 按鈕樣式 */
::-webkit-scrollbar-button {
      background-color: #7c2929;
} 
 
/* 若同時有水平 & 垂直的 Scroll Bar 其交錯點的角落的樣式 */ 
::-webkit-scrollbar-corner {
      background-color: black;
}

```