CSS3 カスタム スクロール バー スタイルの詳細な例

前の記事では、CSS で div スクロール バーのスタイルを設定する方法について説明しました。コンテンツがコンテナーを超えると、コンテナー内にスクロール バーが表示されないことがあります。美的要件を満たしている場合は、CSS 疑似クラス を使用してスクロール バーをカスタマイズできます。

まずスクロールバーについて理解する必要があります。スクロール バーは、外観から 2 つの部分で構成されます。 1. スライド部分、これをスライダーと呼びます。 2. スクロール バーのトラック、つまりスライダーのトラック。トラックの色よりも暗いです。

スクロールバーのCSSスタイルは主に3つの部分で構成されています:

1. ::-webkit-scrollbar スクロールバー全体のスタイルを定義します

2. ::-webkit-scrollbar-thumb スライダー部分。

3. ::-webkit-scrollbar-thumb トラック部分;

以下は overflow-y:auto を例にします (overflow-x:auto も同じです)

html コード:

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

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 {/*滚动条整体样式*/
            width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
        }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
             -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

効果は以下の通り:

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

さらに、スクロール バーのスライダーは次のように、色だけでなく画像も塗りつぶします:

css コード:

    .test-5::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            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 {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            /*border-radius: 10px;*/
            background: #EDEDED;
        }

html コード:

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

効果は次のとおりです:

概要:

上記の例では、ドキュメント内に複数のスクロール バーがある場合、友人が独自のスクロール バーを作成でき、すべてのスクロール バーのスタイルが同じであることを望んでいます。そのため、クラス、ID、ラベル名などを追加する必要はありません。 、などを擬似要素の前に置きます。

関連する推奨事項:

CSS 設定 div スクロール バー スタイルの例

スクロール バー スタイルの問題を解決する方法

divスクロールについてHTMLでのバースタイルデザインの例

以上がCSS3 カスタム スクロール バー スタイルの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。