如果你是一個搞網頁前端的，有必要了解一下自定義滾動條樣式這個東東。目前支持自定義滾動條樣式的有IE瀏覽器、webkit內核瀏覽器（chrome）。

IE下的滾動條樣式

1、樣式規則

scrollbar-arrow-color:?color;?/*上下按鈕上三角箭頭的顏色*/ scrollbar-face-color:?color;?/*滾動條凸出部分的顏色*/ scrollbar-3dlight-color:?color;?/*滾動條亮邊的顏色*/ scrollbar-highlight-color:?color;?/*滾動條空白部分的顏色*/ scrollbar-shadow-color:?color;?/*滾動條陰影的顏色*/ scrollbar-darkshadow-color:?color;?/*滾動條強陰影的顏色*/ scrollbar-track-color:?color;?/*滾動條背景顏色*/scrollbar-base-color:?color;?/*滾動條的基本顏色*/ Cursor:url(mouse.cur);?/*自定義個性鼠標*/ /*以上2項適用與：body、div、textarea、iframe*/

2、Overflow內容溢出時的設置

• overflow 水平及垂直方向內容溢出時的設置
• overflow-x 水平方向內容溢出時的設置
• overflow-y 垂直方向內容溢出時的設置

以上三個屬性設置的值為visible、scroll、hidden、auto

• visible 默認值。使用該值時，無論設置的"width"和"height"的值是多少，其中的內容無論是否超出范圍都將被強制顯示。
• hidden 效果與visible相反。任何超出"width"和"height"的內容都會不可見。
• scroll 無論內容是否超越范圍，都將顯示滾動條。
• auto 當內容超出范圍時，顯示滾動條，否則不顯示。

3、運用

<!--沒有水平滾動條--> <div style="overflow-x: hidden;">test</div> <!--沒有垂直滾動條--> <div style="overflow-y: hidden;">test</div> <!--沒有滾動條--> <div style="overflow: hidden;">test</div> <!--自動顯示滾動條--> <div style="height: 100px; width: 100px; overflow: auto;">test</div>

4、示例

<div style="border: 1px #9EBFE8 solid; width: 250px; height: 150px; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; overflow-x: hidden;"> <div style="width: 300px; height: 200px;">藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條藍色 沒有水平滾動條</div> </div><div style="border: 1px #59ADBB solid; width: 250px; height: 150px; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB; overflow-y: hidden;"> <div style="width: 300px; height: 200px;">綠色 沒有垂直滾動條綠色 沒有垂直滾動條綠色 沒有垂直滾動條綠色 沒有垂直滾動條綠色 沒有垂直滾動條綠色 沒有垂直滾動條</div> </div><div style="border: 1px #FDDEE8 solid; width: 250px; height: 150px; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0; overflow: hidden;"> <div style="width: 2300px; height: 200px;">淺粉紅 沒有滾動條淺粉紅 沒有滾動條淺粉紅 沒有滾動條淺粉紅 沒有滾動條淺粉紅 沒有滾動條淺粉紅 沒有滾動條</div> </div><div style="border: 1px #333333 solid; width: 250px; height: 150px; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC; overflow: auto;"> <div style="width: 300px; height: 200px;">黑色 自動顯示滾動條黑色 自動顯示滾動條黑色 自動顯示滾動條黑色 自動顯示滾動條黑色 自動顯示滾動條黑色 自動顯示滾動條</div> </div><div style="border: 1px #d9d9d9 solid; width: 250px; height: 150px; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff;"> <div style="width: 300px; height: 200px;">灰色 超出范圍強制顯示 灰色 超出范圍強制顯示 灰色 超出范圍強制顯示 灰色 超出范圍強制顯示 灰色 超出范圍強制顯示 灰色 超出范圍強制顯示</div> </div>

webkit內核下的滾動條樣式(chrome)

滾動條是一個偽元素，可以自定義樣式。這個偽類可以將webkit自身的滾動條渲染關閉，只按照用戶自定義的css信息進行渲染。

1、滾動條的所有偽元素

::-webkit-scrollbar?/*?滾動條整體部分?*/ ::-webkit-scrollbar-button?/*?滾動條兩端的按鈕?*/? ::-webkit-scrollbar-track?/*?外層軌道?*/? ::-webkit-scrollbar-track-piece?/*/?內層軌道，滾動條中間部分?*/? ::-webkit-scrollbar-thumb?/*?滑塊?*/? ::-webkit-scrollbar-corner?/*?邊角?*/? ::-webkit-resizer?/*?右下角拖動塊?*/

webkit提供的不止這些，任何對象都可以設置：邊框、陰影、背景圖片等等，創建的滾動條仍然會按照操作系統本身的設置來完成其交互的行為。下面的偽類可以應用到上面的偽元素中:

• :horizontal?– horizontal偽類應用于水平方向的滾動條
• :vertical?– vertical偽類應用于豎直方向的滾動條
• :decrement?– decrement偽類應用于按鈕和內層軌道(track piece)。它用來指示按鈕或者內層軌道是否會減小視窗的位置(比如，垂直滾動條的上面，水平滾動條的左邊。)
• :increment?– increment偽類和decrement類似，用來指示按鈕或內層軌道是否會增大視窗的位置(比如，垂直滾動條的下面和水平滾動條的右邊。)
• :start?– start偽類也應用于按鈕和滑塊。它用來定義對象是否放到滑塊的前面。
• :end?– 類似于start偽類，標識對象是否放到滑塊的后面。
• :double-button – 該偽類以用于按鈕和內層軌道。用于判斷一個按鈕是不是放在滾動條同一端的一對按鈕中的一個。對于內層軌道來說，它表示內層軌道是否緊靠一對按鈕。
• :single-button?– 類似于double-button偽類。對按鈕來說，它用于判斷一個按鈕是否自己獨立的在滾動條的一段。對內層軌道來說，它表示內層軌道是否緊靠一個single-button。
• :no-button?– 用于內層軌道，表示內層軌道是否要滾動到滾動條的終端，比如，滾動條兩端沒有按鈕的時候。
• :corner-present?– 用于所有滾動條軌道，指示滾動條圓角是否顯示。
• :window-inactive?– 用于所有的滾動條軌道，指示應用滾動條的某個頁面容器(元素)是否當前被激活。(在webkit最近的版本中，該偽類也可以用于::selection偽元素。webkit團隊有計劃擴展它并推動成為一個標準的偽類)
• ::-webkit-scrollbar-track-piece:start?{/*滾動條上半邊或左半邊*/}
• ::-webkit-scrollbar-thumb:window-inactive?{/*當焦點不在當前區域滑塊的狀態*/}
• ::-webkit-scrollbar-button:horizontal:decrement:hover?{/*當鼠標在水平滾動條下面的按鈕上的狀態*/}

另外，:enabled、:disabled、:hover?和?:active?等偽類同樣可以適用于滾動條中。

2、示例

<style> ::-webkit-scrollbar?{width:10px;margin-right:2px } ::-webkit-scrollbar:horizontal?{height:10px;margin-bottom:2px } ::-webkit-scrollbar-track?{border-radius:?10px; } ::-webkit-scrollbar-track-piece?{background-color:?#333333;border-radius:?10px; } ::-webkit-scrollbar-thumb?{width:10px;border-radius:?5px;background:?#CBCBCB;? } ::-webkit-scrollbar-thumb:hover?{background:?#909090;? } .test{width:?400px;?height:?200px;overflow:auto;} </style>

?

<div class="test"> <table ?width="500"?border="0"><tr><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td></tr><tr><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td></tr><tr><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td></tr><tr><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td></tr><tr><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td></tr><tr><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td><td>樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1樣式1</td></tr> </table> </div>

轉載于:https://www.cnblogs.com/xuweili/articles/3403090.html

總結

以上是生活随笔為你收集整理的用css自定义滚动条样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。