jsp ul設定滾動條 定義設定滾動條

2021-10-16 21:46:08 字數 1464 閱讀 6879

定義滾動條就是利用偽元素與偽類,那什麼是偽元素和偽類呢?

偽類大家應該很熟悉:link,:focus,:hover,此外css3中又增加了許多偽類選擇器,如:nth-child,:last-child,:nth-last-of-type()等。

在以前的基礎上增加了乙個「:」也就是現在變成了「::first-letter,::first-line,::before,::after」,

另外css3還增加了乙個「::selection」。兩個「::」和乙個「:」在css3中主要用來區分偽類和偽元素。

webkit的偽類和偽元素的實現很強,可以把滾動條當成乙個頁面元素來定義,再結合一些高階的css3屬性,

比如漸變、圓角、rgba等等。然後如果有些地方要用,可以把也可以轉換成base64,不然每次都得載入那個多個,增加請求數。

下面的偽類可以應用到上面的偽元素中。有點小複雜,具體怎麼寫可以看第乙個demo,那裡也有注釋。

: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 {

/*當滑鼠在水平滾動條下面的按鈕上的狀態*/

谷歌滾動條設定 IE滾動條設定

google瀏覽器chrome設定滾動條樣式 courrlist webkit scrollbar courrlist webkit scrollbar track courrlist webkit scrollbar thumb courrlist webkit scrollbar thumb w...

滾動條設定

dllimport user32.dll public static extern int setscrollpos intptr hwd,int nbar,int npos,bool bredraw public static extern int getscrollpos intptr hwd,...

設定滾動條

1,overflow內容溢位時的設定 overflow 水平及垂直方向內容溢位時的設定 overflow x 水平方向內容溢位時的設定 overflow y 垂直方向內容溢位時的設定 以上三個屬性設定的值為visible scroll hidden auto visible 預設值。使用該值時,無論...