css自定義滾動條樣式

阿新 • • 發佈：2019-02-14

/* 自定義滾動條樣式開始 */
#student_unit_div::-webkit-scrollbar {
width:8px;
height:8px;
}
#student_unit_div::-webkit-scrollbar-track {
background:#E3E3E5;
}
#student_unit_div::-webkit-scrollbar-thumb{
background:#F79C58;
border-radius:4px;
}
#student_unit_div::scrollbar-arrow-color{
background-color:#9C9C9C;
}

/* 自定義滾動條樣式結束 */

#scroll-1 {

width:200px;

height:200px;

overflow:auto;

}

#scroll-1div {

width:400px;

height:400px;

} #scroll-1::-webkit-scrollbar {

width:10px;

height:10px;

}

#scroll-1::-webkit-scrollbar-button {

background-color:#FF7677;

}

#scroll-1::-webkit-scrollbar-track {

background

:#FF66D5;

}

#scroll-1::-webkit-scrollbar-track-piece {

background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);

}

#scroll-1::-webkit-scrollbar-thumb{

background:#FFA711;

border-radius:4px;

}

#scroll-1::-webkit-scrollbar-corner {

background:#82AFFF;

}

#scroll-1::-webkit-scrollbar-resizer

{

background:#FF0BEE;

}

自定義瀏覽器滾動條的樣式，打造屬於你的滾動條風格

Div+Css、jQuery 暫無標籤 Jul 19, 2013 0 條評論圍觀 0 次

前段時間，到網上找素材時，看到了一個很個性的滾動條式，開啟Chrome的除錯工具看了一下，發現不是用JavaScript來模擬實現的，覺得有必要折騰一下。於是在各大瀏覽器中對比了一下，發現只用Chrome適用，也就是說這個用的是Chrome的私有CSS屬性。便百之谷之後，發現原來不僅僅只用Chrome，其它的瀏覽器在不同程度上支援自定義滾動條樣式的。下面是我不斷測試的結果，若有錯誤或不全，請在評論裡面給出，我會立馬更正；若有更好的方案，你可以留言，讓大家都開開眼界。。。。。。

自定義IE瀏覽器滾動條樣式

追溯瀏覽器對滾動條的自定義，恐怕最早的就是IE瀏覽器了（好像最開始支援的版本是IE5.5）。下面列出了多個版本的支援性況：

滾動條樣式支援情況支援瀏覽器版本可否繼承描述

scrollbar-3dlight-color IE特有屬性 IE5.5+ y 設定滾動框的和滾動條箭頭左上邊緣的顏色

scrollbar-highlight-color IE特有屬性 IE5.5+ y 設定滾動框的和滾動條箭頭左上邊緣的顏色

scrollbar-face-color IE特有屬性 IE5.5+ y 設定滾動框和滾動條箭頭的顏色

scrollbar-arrow-color IE特有屬性 IE5.5+ y 設定滾動條箭頭的顏色

scrollbar-shadow-color IE特有屬性 IE5.5+ y 設定滾動框的和滾動條箭頭右下邊緣的顏色

scrollbar-dark-shadow-color IE特有屬性 IE5.5+ y 設定滾動條槽的顏色

scrollbar-base-color IE特有屬性 IE5.5+ y 設定滾動條主要構成部分的顏色

scrollbar-track-color IE特有屬性 IE5.5+ y 設定滾動條軌跡組成部分的顏色

為了有助於理解IE中滾動條樣式的控制，你可以檢視如下的圖片：

ie-css-scroll

經過不斷的測試發現，在Win8 下面，有一部分樣式都起著相同的作用。估計是因為在Win8中扁平化的介面設計而重新定議了系統中滾動條！以下是Win 8下面的滾動條樣式，並寫出了和CSS支援的情況：

win-8--ie---scrollbar

以上所寫的幾個四個CSS屬性，足以控制Win 8系統下，IE瀏覽器的滾動條樣式了。但經過測試，發現，其它的四個屬性仍然支援（主要是在以上幾個屬性空缺時，就會體現其作用）。具體如下：

關於scrollbar-track-color，scrollbar-face-color與scrollbar-base-color。直接看英語單詞，你就也許能明白scroll-base-color是一個備用顏色，只要前兩者未設定時，它就開始起作用了。但是你得注意，當scrollbar-base-color用來作scrollbar-track-color功能來用時，你會發現，實際顏色與設定的顏色要淡一點。不信你可以這樣試試：只設置一下scrollbar-base-color看看滾動條的效果。

關於scrollbar-dark-shadow-color屬性，通過測試發現Win 8下IE10，IE11滾動條並沒有改變。可能是win 8的滾動條重新定義了，導致沒有了隱影了吧！（僅個人猜想）

通過觀察我們發現，Win 8下的滾動條中，上箭頭和下箭頭後面的背景顏色都已經從scroll-face-color中脫離出來了，從屬於scroll-track-color屬性控制。

感覺IE瀏覽器滾動條自定製功能並不是很強，只能控制一樣顯示各個部分的顏色而已，像寬度，結構等都無法控制，要靠出個性點的滾動條，很難！很難！！！

自定義FireFox瀏覽器滾動條

在網上找了很多關於Firfox自定義瀏覽器滾動條的方法，發現firefox中卻實是不支援的。發現了幾篇說可以更改，自已也跟著程式碼寫了幾次（不知是我錯了還是。。。），發現卻是不起作用。以下是一點小的收穫：

複製

@-moz-document url-prefix(http://),url-prefix(https://) {

/* 滾動條顏色 */

scrollbar {

-moz-appearance: none !important;

background: rgb(0,255,0) !important;

}

/* 滾動條按鈕顏色 */

thumb,scrollbarbutton {

-moz-appearance: none !important;

background-color: rgb(0,0,255) !important;

}

/* 滑鼠懸停時按鈕顏色 */

thumb:hover,scrollbarbutton:hover {

-moz-appearance: none !important;

background-color: rgb(255,0,0) !important;

}

/* 隱藏上下箭頭 */

scrollbarbutton {

display: none !important;

}

/* 縱向滾動條寬度 */

scrollbar[orient="vertical"] {

min-width: 15px !important;

}

實測以上程式碼並不起作用。但也可能是我的瀏覽器的版本不對吧！你可以試試，要是有效的話，你可以把你的FF版本發表在文章評論裡面。

下面給兩個關於FF滾動條的討論(你多少web開發者希望FF能夠像webkit核心瀏覽器一樣程度的來支援滾動條自定義)：

https://bugzilla.mozilla.org/show_bug.cgi?id=547260

https://bugzilla.mozilla.org/show_bug.cgi?id=77790

webkit核心的瀏覽器滾動條定製

在所有瀏覽器，滾動條可定製性最強的當屬webkit核心的瀏覽器了。因為原始碼開放的原因，市面上基於webkit核心的瀏覽器也是很難窮舉完。例如有：Google Chrome、Opera（opera最近宣佈使用webkit核心了）、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······

下面我們來看一下webkit瀏覽器是如何強大的吧！

複製

CSS

::-webkit-scrollbar { /* 1 */ }

::-webkit-scrollbar-button { /* 2 */ }

::-webkit-scrollbar-track { /* 3 */ }

::-webkit-scrollbar-track-piece { /* 4 */ }

::-webkit-scrollbar-thumb { /* 5 */ }

::-webkit-scrollbar-corner { /* 6 */ }

::-webkit-resizer { /* 7 */ }

以上CSS程式碼所管轄的區域對就關係：以上註釋中的數字與下圖中數字相對應。

scrollbarparts

上圖正如如下所言：

::-webkit-scrollbar 滾動條整體部分，其中的屬性有width,height,background,border（就和一個塊級元素一樣）等。

::-webkit-scrollbar-button 滾動條兩端的按鈕。可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track 外層軌道。可以用display:none讓其不顯示，也可以新增背景圖片，顏色改變顯示效果。

::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）。

::-webkit-scrollbar-thumb 滾動條裡面可以拖動的那部分

::-webkit-scrollbar-corner 邊角

::-webkit-resizer 定義右下角拖動塊的樣式

注意：對以上各個部分定義width,height時。有如下功能：若是水平滾動條，則width屬性不起作用，height屬性用來控制滾動條相應部分豎直方向高度；若是豎直滾動條，則height屬性不起作用，width屬性用來控制相應部分的寬度。

能過上面的不斷的測試。在Chrome中，滾動條中的各個部分和DOM中塊級元素是一樣的。通過::-webkit-scrollbar等就類似於原來所說的CSS中的選擇器。而{}中的屬性，你就像控制一般塊級元素一樣簡單（強大啊）。

請選擇Webkit核心的瀏覽器才可以正常的看到滾動條的變化。小天地，大世界是一個Web前端的技術部落格。主要是關於HTML 5,CSS 3,JavaScript,JQuery等。除此之外，還包含一些PHP語言等的實用例子。

對應的原始碼如下：

CSS部分程式碼：

複製

#scroll-1 {

width:200px;

height:200px;

overflow:auto;

}

#scroll-1 div {

width:400px;

height:400px;

} #scroll-1::-webkit-scrollbar {

width:10px;

height:10px;

}

#scroll-1::-webkit-scrollbar-button {

background-color:#FF7677;

}

#scroll-1::-webkit-scrollbar-track {

background:#FF66D5;

}

#scroll-1::-webkit-scrollbar-track-piece {

background:url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);

}

#scroll-1::-webkit-scrollbar-thumb{

background:#FFA711;

border-radius:4px;

}

#scroll-1::-webkit-scrollbar-corner {

background:#82AFFF;

}

#scroll-1::-webkit-scrollbar-resizer {

background:#FF0BEE;

}

HTML結構：

複製

<div >