這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)如何在CSS中設(shè)置滾動(dòng)條樣式，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站 - 香港機(jī)房服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，香港機(jī)房服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，機(jī)柜大帶寬、租用·托管，四川老牌ＩＤＣ服務(wù)商

webkit滾動(dòng)條樣式重置

1、scrollbar包含scrollbar buttons和一個(gè)track。track進(jìn)一步細(xì)分為track pieces和thumb。trace pieces為thumb的上半部分和半下部分。
2、scrollbar corner為橫向和豎向的交叉角區(qū)域
3、resize用來設(shè)置滾動(dòng)條的交匯處上用于拖動(dòng)調(diào)整元素大小的小控件

組成結(jié)構(gòu)圖如下：
 

一旦發(fā)現(xiàn)滾動(dòng)條的自定義樣式，瀏覽器的默認(rèn)樣式設(shè)置將會(huì)失效，只使用在css定義的樣式。也就意味值不能單獨(dú)只設(shè)置scrollbar button或scrollbar track。

-webkit-scrollbar  /* 滾動(dòng)條整體部分，重置時(shí)必須要設(shè)置 */
-webkit-scrollbar-button  /* 滾動(dòng)條的軌道的兩端按鈕  */
-webkit-scrollbar-track /* 滾動(dòng)條的軌道（包含thumb和trace-piece）*/
-webkit-scrollbar-track-piece /* 軌道中下方塊的上下(左右)部分*/
-webkit-scrollbar-thumb  /*滾動(dòng)條里面的小方塊*/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滾動(dòng)條的交匯處上用于拖動(dòng)調(diào)整元素大小的小控件 */

可以結(jié)合以下偽類進(jìn)行設(shè)置（不同的操作系統(tǒng)瀏覽器滾動(dòng)條可能不一樣，所有可以根據(jù)下面?zhèn)晤悂碓O(shè)置）：

• :horizontal 水平方向的track、track-piect、thumb

• :vertica 垂直方向的track、track-piect、thumb

• :decrement 向上和向左按鈕的button、向上或向左的track-piece

• :increment 向下和向右按鈕的button、向下和向右的track-piece

• :start 適用于buttons和track pieces,對(duì)象（buttons 或 trace piece）是否放在滑塊的前面

• :end 適用于buttons和track pieces,對(duì)象（buttons 或 trace piece）是否放在滑塊的后面

• :double-button 適用于buttons和track pieces，軌道結(jié)束的位置是否是一對(duì)按鈕

• :single-button 適用于buttons和track pieces，軌道結(jié)束的位置是否是一個(gè)按鈕

• :no-button 適用于track pieces，軌道結(jié)束的位置沒有按鈕

• :corner-present 適用于所有scrollbar,滾動(dòng)條的角落是否存在

• :window-inactive 適用于所有scrollbar,包含滾動(dòng)條的區(qū)域，焦點(diǎn)不在該窗口的時(shí)候

• :enabled, :disabled, :hover , :active 這些偽類同樣適用

IE中只能修改滾動(dòng)條顏色

scrollbar-arrow-color:#f2f2f3;  /*上下箭頭*/
scrollbar-track-color  /*底層背景色*/
scrollbar-face-color   /*滾動(dòng)條前景色，對(duì)應(yīng)thumb*/
scrollbar-shadow-color /*滾動(dòng)條邊線色,thubm的border*/
scrollbar-highlight-color  /*滾動(dòng)條整體顏色*/
scrollbar-base-color /* 滾動(dòng)條基準(zhǔn)顏色 */

上述就是小編為大家分享的如何在CSS中設(shè)置滾動(dòng)條樣式了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。