深入了解webkit-scrollbar

webkit-scrollbar是Webkit瀏覽器具有的自定義捲軸屬性來渲染瀏覽器滾動條的CSS屬性。此屬性可控制滾動條的寬度、滑塊大小、背景顏色、滑塊顏色等，可以讓我們在一定程度上美化網頁的滾動條，提升用戶體驗。本篇文章將從多個方面對webkit-scrollbar進行詳細的闡述。

一、webkit-scrollbar間距

我們可以使用webkit-scrollbar設置間距，使滾動條與邊框之間的間距更大或更小，增加對用戶的可讀性和美觀度。

/* CSS代碼實例 */
::webkit-scrollbar {
    width: 12px;
    background-color: #F5F5F5;
}

::webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #C1C1C1;
}

/* 設置滾動條到邊框的距離 */
::webkit-scrollbar {
    margin-right: 20px;
    margin-bottom: 20px;
}

二、webkit-scrollbar兼容哪些瀏覽器

webkit-scrollbar在谷歌、Safari等基於webkit核心的瀏覽器上都支持。但是在火狐瀏覽器上不支持。在不同瀏覽器上實現美化滾動條，我們需要處理各種瀏覽器內核的兼容性問題。

三、webkit-scrollbar transform

webkit-scrollbar transform屬性可以實現對滑塊大小、位置、旋轉傾斜等的變化。

/* CSS代碼實例 */
/* 縮小滑塊 */
::-webkit-scrollbar-thumb {
    -webkit-transform: scale(0.4);
}

/* 翻轉滑塊 */
::-webkit-scrollbar-thumb {
    -webkit-transform: rotate(90deg);
}

/* 傾斜滑塊 */
::-webkit-scrollbar-thumb {
    -webkit-transform: skewX(30deg);
}

四、webkit scrollbar橫向

webkit-scrollbar可以讓滾動條變為橫向。

/* CSS代碼實例 */
/* 橫向滾動條 */
::-webkit-scrollbar {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #C1C1C1;
}

/* 滑塊寬度 */
::-webkit-scrollbar-thumb {
    height: 12px;
}

/* 橫向上滑塊高度 */
::-webkit-scrollbar-track {
    height: 12px;
    background-color: #F5F5F5;
}

五、webkit scrollbar

通常我們只需要通過webkit-scrollbar的屬性來設置滾動條的樣式就可以了，不過如果我們需要進一步控制滾動條的繪製方式，我們可以使用-webkit-scrollbar-corner屬性來自定義滾動條的繪製方式。

/* CSS代碼實例 */
::-webkit-scrollbar {
    background-color: #F5F5F5;
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: #C1C1C1;
}

::-webkit-scrollbar-corner {
    background-color: #FFF;
    border: 1px solid #CCC;
}

六、webkit scrollbar設置寬度後

當我們設置了webkit-scrollbar寬度後，滾動條與邊框之間的間距會自然變小，這時我們可以使用::-webkit-scrollbar-button來增加滾動條按鈕的寬度。

/* CSS代碼實例 */
::-webkit-scrollbar {
    border: none;
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #C1C1C1;
}

::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
/* 設置按鈕的寬度 */
::-webkit-scrollbar-button {
    width: 20px;
}

七、webkit scrollbar位置

我們可以使用-webkit-transform屬性來設置滾動條的垂直位置。

/* CSS代碼實例 */
/* 將滾動條向上移30px */
::-webkit-scrollbar {
    transform: translateY(30px);
}

八、webkit scrollbar horizon

對於一些水平滾動條，我們需要使用-webkit-transform屬性來將滾動條變成橫向的。

/* CSS代碼實例 */
/* 將滾動條變成橫向 */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #C1C1C1;
    border-radius: 10px;
}

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

::-webkit-scrollbar:horizontal {
    height: 8px;
    width: 100%;
}

::-webkit-scrollbar-thumb:horizontal {
    background-color: #C1C1C1;
    border-radius: 10px;
}

::-webkit-scrollbar-track:horizontal {
    background-color: #F5F5F5;
    border-radius: 10px;
}

結語

以上就是對webkit-scrollbar的詳細闡述，雖然最初目的只是為了美化滾動條，但是在實際應用中，我們可以通過樣式繪製更多更為精美的控件。希望對大家有所幫助！