BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. CSS/HTML

CSSカスタムスクロールバースタイルの事例詳細

2022-01-17 21:29:06

CSS3 カスタムスクロールバースタイル -webkit-scrollbar

コンテンツがコンテナを超えた場合、コンテナは、独自のスクロールバーは時々私たちの美的要件を満たすことができない、我々はCSSの擬似クラスを介してスクロールバーのカスタマイズを実現することができ、スクロールバーが表示されます。

まず、スクロールバーについて理解する必要があります。スクロールバーは、外側から2つの部分から構成されています：1、我々はスライダー2と呼ぶスライドする部分、スクロールバーのトラック、トラックの色よりも一般的に暗いですスライダーのトラック、。

スクロールバーのcssスタイルは、主に3つの要素で構成されています。

  1. ::-webkit-scrollbar はスクロールバー全体のスタイリングを定義します。
  2. webkit-scrollbar-thumb スライダーセクションです。
  3. webkit-scrollbar-thumb track セクションです。

overflow-y:auto;の例です（overflow-x:autoは同じです）。

htmlのコードです。 

<div class="test test-1">
    <div class="scrollbar"></div>
</div>

のCSSコードです。 

.test{
    width: 50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
}
.scrollbar{
    width: 30px;
    height: 300px;
    margin: 0 auto;
 
}
.test-1::-webkit-scrollbar {/*whole scrollbar style*/
        width: 10px; /*height and width correspond to the size of the horizontal and vertical scrollbars respectively*/
        height: 1px;
    }
.test-1::-webkit-scrollbar-thumb {/*small square inside the scrollbar*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.test-1::-webkit-scrollbar-track {/*scrollbar-inside-track*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDEDED;
    }

その効果は次の通りである。

スクロールバーの幅を変更したい場合は ::-webkit-scrollbar で変更します。スクロールバーのスライダーの丸みを変更したい場合は ::-webkit-scrollbar-thumb で変更します。トラックの丸みを変更したい場合は ::-webkit-scrollbar-track で変更します。

また、スクロールバースライダーには、色だけでなく、以下のように画像も入れることができます。

のCSSコードで指定します。 

.test-5::-webkit-scrollbar {/*whole-scrollbar-style*/
    width: 10px; /*height and width correspond to the size of the horizontal and vertical scrollbars respectively*/
    height: 1px;
}
.test-5::-webkit-scrollbar-thumb {/*small square inside the scrollbar*/
        border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba( 255, 255, 255, .2) 75%, transparent 75%, transparent);
    }
.test-5::-webkit-scrollbar-track {/*scrollbar-inside-track*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*border-radius: 10px;*/
        background: #EDEDEDED;
    }

htmlのコードです。 

<div class="test test-5">
    <div class="scrollbar"></div>
</div>

その効果は次の通りです。

をクリックすると、お好みのスクロールバーが作成できます。

文書中に複数のスクロールバーが出現し、それらのすべてが同じスタイルになるようにしたい場合、擬似要素の前にclass、id、タグ名などを付ける必要はありません。

この記事CSSカスタムスクロールバースタイルのケースの詳細は、これに関連するCSSカスタムスクロールバースタイルの内容は、以前の記事を検索してくださいまたは次の関連記事を閲覧し続けるあなたは、スクリプトの家をサポートしています願っています！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します