HTML自定義滾動條

2021-09-02 20:04:19 字數 767 閱讀 5413

它是使用css中的偽元素來實現的，主要由以下三個來完成：

1.-webkit-scrollbar：定義滾動條的樣式，如長寬。

2.-webkit-scrollbar-thumb：定義滾動條上滑塊的樣式。

3.-webkit-scrollbar-track：定義滾動條主幹部分（背景）的樣式。

.nui-scroll::-webkit-scrollbar
滾動條滑塊樣式 

/*正常情況下滑塊的樣式*/


.nui-scroll::-webkit-scrollbar-thumb 


/*滑鼠懸浮在該類指向的控制項上時滑塊的樣式*/


.nui-scroll:hover::-webkit-scrollbar-thumb 


/*滑鼠懸浮在滑塊上時滑塊的樣式*/


.nui-scroll::-webkit-scrollbar-thumb:hover
滾動條主幹部分樣式

/*正常時候的主幹部分*/


.nui-scroll::-webkit-scrollbar-track 


/*滑鼠懸浮在滾動條上的主幹部分*/


.nui-scroll::-webkit-scrollbar-track:hover
顯示滾動條 

.nui-scroll

html自定義滾動條

treeview treeview hover treeview webkit scrollbar 定義滾動條軌道 內陰影 圓角 treeview webkit scrollbar thumb 定義滾動條軌道 內陰影 圓角 treeview webkit scrollbar track 滾動條兩端的...

自定義滾動條

滾動條從外觀來看是由兩部分組成 1.滑塊 可以滑動的部分 2.軌道 即滑塊的軌道，一般來說滑塊的顏色比軌道的顏色深。滾動條的css樣式主要有三部分組成 1 webkit scrollbar 定義了滾動條整體的樣式 可以改變滾動條的寬度 2 webkit scrollbar thumb 滑塊部分 可以...

自定義滾動條

body,div 2 某些樣式需ie5.5 才能支援 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2...