CSS 設置滾動條樣式的實現

  發布時間:2019-10-11 15:42:05   作者:xuriliang   我要評論
這篇文章主要介紹了CSS 設置滾動條樣式的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

webkit滾動條樣式重置

1、scrollbar包含scrollbar buttons和一個track。track進一步細分為track pieces和thumb。trace pieces為thumb的上半部分和半下部分。
2、scrollbar corner為橫向和豎向的交叉角區域
3、resize用來設置滾動條的交匯處上用于拖動調整元素大小的小控件

組成結構圖如下:
 

一旦發現滾動條的自定義樣式,瀏覽器的默認樣式設置將會失效,只使用在css定義的樣式。也就意味值不能單獨只設置scrollbar button或scrollbar track。

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

可以結合以下偽類進行設置(不同的操作系統瀏覽器滾動條可能不一樣,所有可以根據下面偽類來設置):

  • :horizontal 水平方向的track、track-piect、thumb
  • :vertica 垂直方向的track、track-piect、thumb
  • :decrement 向上和向左按鈕的button、向上或向左的track-piece
  • :increment 向下和向右按鈕的button、向下和向右的track-piece
  • :start 適用于buttons和track pieces,對象(buttons 或 trace piece)是否放在滑塊的前面
  • :end 適用于buttons和track pieces,對象(buttons 或 trace piece)是否放在滑塊的后面
  • :double-button 適用于buttons和track pieces,軌道結束的位置是否是一對按鈕
  • :single-button 適用于buttons和track pieces,軌道結束的位置是否是一個按鈕
  • :no-button 適用于track pieces,軌道結束的位置沒有按鈕
  • :corner-present 適用于所有scrollbar,滾動條的角落是否存在
  • :window-inactive 適用于所有scrollbar,包含滾動條的區域,焦點不在該窗口的時候
  • :enabled, :disabled, :hover , :active 這些偽類同樣適用

IE中只能修改滾動條顏色

scrollbar-arrow-color:#f2f2f3;  /*上下箭頭*/
scrollbar-track-color  /*底層背景色*/
scrollbar-face-color   /*滾動條前景色,對應thumb*/
scrollbar-shadow-color /*滾動條邊線色,thubm的border*/
scrollbar-highlight-color  /*滾動條整體顏色*/
scrollbar-base-color /* 滾動條基準顏色 */

參考資料

Styling Scrollbars | Webkit

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • CSS3改變瀏覽器滾動條樣式

    瀏覽器滾動條太寬,太丑,影響日常開發怎么辦,本文介紹了如何使用CSS3改變瀏覽器滾動條樣式,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看
    2019-01-04
  • 純css修改瀏覽器scrollbar滾動條樣式示例

    這篇文章主要介紹了純css修改瀏覽器scrollbar滾動條樣式示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-23
  • CSS 設置滾動條樣式的實例代碼

    這篇文章主要介紹了CSS 設置滾動條樣式的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-07-06
  • 詳解css3自定義滾動條樣式寫法

    這篇文章主要介紹了css3自定義滾動條樣式寫法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-25
  • CSS3自定義滾動條樣式的示例代碼

    本篇文章主要介紹了CSS3自定義滾動條樣式的示例代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-21
  • 純CSS改變webkit內核瀏覽器的滾動條樣式

    這篇文章主要介紹了純CSS改變webkit內核瀏覽器的滾動條樣式,需要的朋友可以參考下
    2014-04-17
  • css使用overflow屬性控制滾動條的樣式

    滾動條的樣式我們可以通過css來控制的,滾動條樣式主要涉及到如下overflow屬性,下面簡單為大家介紹下具體的控制屬性,感性的朋友不要錯過
    2013-11-01
  • div css 滾動條樣式 DIV滾動條屬性及樣式設置方式

    所謂DIV滾動條,就是利用DIV標簽,在里面嵌入CSS樣式表,加入overflow的屬性值,這樣,當div所規范的區域內的內容達到一定程序時,滾動條就派上用場,這里為你介紹DIV滾動條
    2012-12-23

最新評論

pc蛋蛋计划下载