CSS客製化滾動條 滾動條 scrollbar

用CSS客製化滾動條

張嘉峻 Zhangjia Jun 2021/11/17 16:34:02
90

1.原始的視窗畫面如下圖:文字過多,視窗會拉得很長,我們要先將視窗的divCSS:

max-height: 319px;

overflow-y: overlay;

這樣視窗就會如CSS所設定的,文字就算過多,最大高度(max-height)也會被設定在319px;

overflow-y: overlay可以因應溢出的文字讓視窗產生滾動條,如下圖

 

2.改變滾動條的樣式:對視窗divcss加上:

    ::-webkit-scrollbar {

      width: 7px;

    }

    ::-webkit-scrollbar-button {

      background: transparent;

      border-radius: 4px;

    }

    ::-webkit-scrollbar-track-piece {

      background: transparent;

    }

    ::-webkit-scrollbar-thumb {

      border-radius: 4px;

      background-color: rgba(0, 0, 0, 0.4);

      border: 1px solid slategrey;

    }

    ::-webkit-scrollbar-track {

      box-shadow: transparent;

    }

 

Scss的架構如下圖(紅框處)

 

這樣可以很明顯地看到滾動條的樣式和剛剛的不一樣了

 

3.逐一解說:

::-webkit-scrollbar可以調整滾動條的寬度(如下圖)

   &::-webkit-scrollbar {

      width: 50px;

    }

 

::-webkit-scrollbar-button可以調整滾動條和視窗上下間距的樣式,如下圖紅框處。

   &::-webkit-scrollbar-button {

      background: blue;

      border-radius: 4px;

    }

 

如果要讓它看不見background: transparent; 就可以了

::-webkit-scrollbar-track-piece可以調整滾動條背後區塊的樣式,如下圖紅框處。

&::-webkit-scrollbar-track-piece {

      background: yellow;

    }

如果要讓它看不見background: transparent; 就可以了

 

::-webkit-scrollbar-thumb可以調整滾動條滑塊的樣式,如下圖紅框處。

  &::-webkit-scrollbar-thumb {

      border-radius: 4px;

      background-color: rgba(197, 24, 145, 0.4);

      border: 1px solid #000;

    }

 

::-webkit-scrollbar-track可以調整滾動條軌道的樣式(如下圖藍色陰影)

  &::-webkit-scrollbar-track {

      box-shadow: 8px 8px 10px 10px rgb(35, 186, 197);

    }

若不需要陰影box-shadow: none 就可以了

 

參考資料https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

張嘉峻 Zhangjia Jun