CSS3改變瀏覽器滾動條

::-webkit-scrollbar 

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb 
::-webkit-scrollbar-track 
::-webkit-scrollbar-thumb 
::-webkit-scrollbar-corner

webkit現在支援擁有overflow屬性的區域，列表框，下拉列表，textarea的滾動條自定義樣式。

如果你想跳過介紹，直接看demo的話，demo

滾動條是乙個偽元素，可以自定義樣式。這個偽類可以將webkit自身的滾動條渲染關閉，只按照使用者自定義的css資訊進行渲染。比如：

::-webkit-scrollbar

width和height屬性分別表示縱向滾動條的寬度和橫向滾動條的高。也可以指定為%百分比，在在這種情況下就代表了，滾動條佔整個視窗的百分比，如：

::-webkit-scrollbar

滾動條包括：滾動按鈕和乙個軌道。軌道本身有進一步氛圍軌道碎片（track pieces）和乙個滑塊。軌道碎片值滑塊上方和下面的區域。滾動條的角合適被設定為各種風格，比如可以調整文字區域的大小。

下面是關於滾動條的所有偽元素：

::-webkit-scrollbar

::-webkit-scrollbar-button

::-webkit-scrollbar-track

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-thumb

::-webkit-scrollbar-corner

::-webkit-resizer

任何物件都可以設定：邊框、陰影、背景等等，建立的滾動條任然會按照作業系統本身的設定來完成其互動的行為。下面的偽類可以應用到上面的偽元素中。

:horizontal(horizontal偽類適用於任何水平方向上的滾動條)

:vertical(vertical偽類適用於任何垂直方向的滾動條)

:decrement(decrement偽類適用於按鈕和軌道碎片。表示遞減的按鈕或軌道碎片，例如可以使區域向上或者向右移動的區域和按鈕)

:increment(increment偽類適用於按鈕和軌道碎片。表示遞增的按鈕或軌道碎片，例如可以使區域向下或者向左移動的區域和按鈕)

:start(start偽類適用於按鈕和軌道碎片。表示物件（按鈕 軌道碎片）是否放在滑塊的前面)

:end(end偽類適用於按鈕和軌道碎片。表示物件（按鈕 軌道碎片）是否放在滑塊的後面)

:double-button(double-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。)

:single-button(single-button偽類適用於按鈕和軌道碎片。判斷軌道結束的位置是否是乙個按鈕。也就是軌道碎片緊挨著乙個單獨的按鈕。)

:no-button(no-button偽類表示軌道結束的位置沒有按鈕。)

:corner-present(corner-present偽類表示滾動條的角落是否存在。)

:window-inactive(適用於所有滾動條，表示包含滾動條的區域，焦點不在該視窗的時候。)

::-webkit-scrollbar-track-piece:start

::-webkit-scrollbar-thumb:window-inactive

::-webkit-scrollbar-button:horizontal:decrement:hover

css 改變瀏覽器預設滾動條樣式

這個網上很多的教程，我就不多嗶嗶了，直接貼 方便自己和大家使用。可以把下面的 放到乙個css中，然後全域性引入就可以了。整個滾動條 webkit scrollbar 滾動條有滑塊的軌道部分 webkit scrollbar track piece 滾動條滑塊 豎向 vertical 橫向 horiz...

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

話不多說直接上 滾動條樣式 webkit scrollbar 滾動條整體樣式 width 4px 高寬分別對應橫豎滾動條的尺寸 height 4px webkit scrollbar thumb 滾動條裡面小方塊 border radius 5px webkit box shadow inset 0...

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

乙個完整滾動條右以下部分組成 webkit scrollbar 滾動條整體部分，常用屬性 width,height,background,border webkit scrollbar button 滾動條兩邊的按鈕，預設不設定時不顯示，可設定高度 背景色 背景 webkit scrollbar t...