CSS3自訂捲軸樣式:webkit-scrollbar的詳解

來源:互聯網
上載者:User
有沒有覺得瀏覽器內建的原始捲軸很不美觀,同時也有看到很多網站的自訂捲軸顯得高端,就連chrome32.0開發板都拋棄了原始的捲軸,美觀多了。那webkit瀏覽器是如何自訂捲軸的呢?

前言

webkit支援擁有overflow屬性的地區,列表框,下拉式功能表,textarea的捲軸自訂樣式,所以用處還是挺大的。當然,相容所有瀏覽器的捲軸樣式目前是不存在的。

示範

來看看這2個捲軸demo: demo1(圖片版)、demo2(純CSS3版)

捲軸組成

  • ::-webkit-scrollbar 捲軸整體部分

  • ::-webkit-scrollbar-thumb 捲軸裡面的小方塊,能向上向下移動(或往左往右移動,取決於是垂直捲軸還是水平捲軸)

  • ::-webkit-scrollbar-track 捲軸的軌道(裡面裝有Thumb)

  • ::-webkit-scrollbar-button 捲軸的軌道的兩端按鈕,允許通過點擊微調小方塊的位置。

  • ::-webkit-scrollbar-track-piece 內層軌道,捲軸中間部分(除去)

  • ::-webkit-scrollbar-corner 邊角,即兩個捲軸的交匯處

  • ::-webkit-resizer 兩個捲軸的交匯處上用於通過拖動調整元素大小的小控制項

簡潔版

這裡就不貼出詳細代碼了,demo裡面可以通過查看源碼尋找具體樣式的設定。來看看demo2中第二個捲軸的樣式


/*定義捲軸高寬及背景 高寬分別對應橫豎捲軸的尺寸*/::-webkit-scrollbar{width: 16px;height: 16px;background-color: #F5F5F5;}/*定義捲軸軌道 內陰影+圓角*/::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #F5F5F5;}/*定義滑塊 內陰影+圓角*/::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #555;}

詳細設定

定義捲軸就是利用虛擬元素與偽類,那什麼是虛擬元素和偽類呢?

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

CSS中的虛擬元素大家以前看過::first-line,:first-letter,:before,:after。那麼在CSS3中,虛擬元素進行了調整,在以前的基礎上增加了一個“:”也就是現在變成了“::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-buttonno-button偽類表示軌道結束的位置沒有按鈕。:corner-present//corner-present偽類表示捲軸的角落是否存在。:window-inactive//適用於所有捲軸,表示包含捲軸的地區,焦點不在該視窗的時候。::-webkit-scrollbar-track-piece:start {/*捲軸上半邊或左半邊*/}::-webkit-scrollbar-thumb:window-inactive {/*當焦點不在目前範圍滑塊的狀態*/}::-webkit-scrollbar-button:horizontal:decrement:hover {/*當滑鼠在水平捲軸下面的按鈕上的狀態*/}
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.