小編給大家分享一下css怎么修改滾動(dòng)條箭頭樣式，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)主營姑蘇網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā)公司,姑蘇h5小程序制作搭建,姑蘇網(wǎng)站營銷推廣歡迎姑蘇等地區(qū)企業(yè)咨詢

在css中，可以通過“::-webkit-scrollbar”偽類選擇器設(shè)置滾動(dòng)條箭頭樣式，語法“::-webkit-scrollbar-button{屬性:屬性值;}”；該選擇器可以設(shè)置滾動(dòng)條軌道的兩端按鈕，允許通過點(diǎn)擊微調(diào)小方塊的位置。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

::-webkit-scrollbar CSS偽類選擇器影響了一個(gè)元素的滾動(dòng)條的樣式，僅僅在支持WebKit的瀏覽器 (例如, 谷歌Chrome, 蘋果Safari)可以使用。

可修改滾動(dòng)條css：

::-webkit-scrollbar — 整個(gè)滾動(dòng)條.
::-webkit-scrollbar-button — 滾動(dòng)條上的按鈕 (上下箭頭).
::-webkit-scrollbar-thumb — 滾動(dòng)條上的滾動(dòng)滑塊.
::-webkit-scrollbar-track — 滾動(dòng)條軌道.
::-webkit-scrollbar-track-piece — 滾動(dòng)條沒有滑塊的軌道部分.
::-webkit-scrollbar-corner — 當(dāng)同時(shí)有垂直滾動(dòng)條和水平滾動(dòng)條時(shí)交匯的部分.
::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動(dòng)按鈕).

例子：給 class="left-nav"的div,修改滾動(dòng)條箭頭樣式

::-webkit-scrollbar-button {
    display: block; 
} 
::-webkit-scrollbar-button:horizontal:single-button:start {
    width: 24px;  
    background: url("../img/scroll_btn.png") 0 -52px no-repeat;
    cursor: pointer;
}
::-webkit-scrollbar-button:horizontal:single-button:end {
    width: 24px;    
    background: url("../img/scroll_btn.png") 0 -77px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:start {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px 0px no-repeat;    
    cursor: pointer;
}
::-webkit-scrollbar-button:vertical:single-button:end {
    width: 16px;    
    background: url("../img/scroll_btn.png") -3px -26px no-repeat;    
    cursor: pointer;
}

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

看完了這篇文章，相信你對(duì)“css怎么修改滾動(dòng)條箭頭樣式”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！