CSS3でスクロールバーのスタイルをカスタマイズする方法-CSSチュートリアル-php.cn

CSS3でスクロールバーのスタイルをカスタマイズする方法

清浅

リリース： 2021-04-20 15:09:06

オリジナル

6425 人が閲覧しました

CSS3 でスクロールバーのスタイルをカスタマイズする方法: 最初に HTML サンプルファイルを作成し、次に要素に「overflow:scroll」を設定してスクロールバーを生成します。最後に、各値を設定してスクロールを再カスタマイズします。スクロールバー属性の Bar スタイルで十分です。

CSS3でスクロールバーのスタイルをカスタマイズする方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS3 では、オーバーフローを設定することでスクロールバーを生成できます。要素までスクロールし、スクロールバー属性の各値を設定してスクロールバーのスタイルを再カスタマイズします。スクロールバーはブラウザーには不可欠です。通常、Web サイトに独自のスクロールバーがあると、より人目を引き、Web サイトの見た目が変わります。 jQuery プラグインを使用してカスタムスクロールバーを実装することもできます。CSS3 を使用して独自のスクロールバーを作成することもできます。次の記事では、CSS3 を使用してカスタムスクロールバーを作成する方法を詳しく紹介します。

#overflow属性:

主にコンテンツがはみ出した場合のスタイル(スクロールバーを限界を超えて表示するかどうか)を設定します overflow-x: 横方向のコンテンツがはみ出した場合の設定

overflow-y: 縦方向のコンテンツがオーバーフローする場合の設定

3 つの属性設定の値は、visible (デフォルト値)、scroll、hidden、auto です。

デフォルトのスクロールバースタイル:

   <style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;//设置滚动条
    }
    .overflow {
        height: 450px;
    }
    </style>
</head>
<body>
    <div class="scrollbar" id="style-1">
        <div class="overflow"></div>
    </div>

ログイン後にコピー

[推奨コース:

CSS3 チュートリアル

]

レンダリング:

scrollbar属性: CSS3でスクロールバーのスタイルをカスタマイズする方法

scrollbar-face-color: 3次元スクロールバーのはみ出し部分の色スクロールバーの矢印の色上下ボタンの三角矢印の色

スクロールバーの空白部分の色

スクロールバーシャドウ-color: 3 次元スクロールバーの境界線の色

注: これらの属性は IE ブラウザーでのみサポートされます

例:

 scrollbar-face-color:pink;

ログイン後にコピー

レンダリング:

カスタムスクロールバースタイル: CSS3でスクロールバーのスタイルをカスタマイズする方法

-webkit-scrollbar: スクロールバーの全体部分 -webkit-scrollbar-button:スクロールバーの両端のボタン -webkit-scrollbar-track: 外側のレイヤートラック

-webkit-scrollbar-track-piece: 内側のトラック、スクロールバーの中央部分 (削除)

- webkit-scrollbar-thumb: ドラッグバー
-webkit-scrollbar-corner: コーナー
-webkit-resizer: 右下隅のドラッグブロックのスタイルを定義します

例:

<style type="text/css">
    .scrollbar {
        background-color: #F5F5F5;
        height: 300px;
        width: 65px;
        margin: 100px auto;
        overflow-y: scroll;

    }
    .overflow {
        height: 450px;
    }
    /*滚动条区域*/
#demo::-webkit-scrollbar{
  width:20px;
  background-color:#fff;
}
     /*滚动条*/
#demo::-webkit-scrollbar-thumb{
  background-color:#f196c4b3;

}
/*滚动条外层轨道*/
#demo::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px ;
    background-color:pink;
    border-radius: 10px;
}
    </style>
}

</head>
<body>
    <div class="scrollbar" id="demo">
        <div class="overflow"></div>
    </div>
</body>

ログイン後にコピー

レンダリング:

要約 : 上記がこの記事の全内容です。この記事を通じて、カスタムスクロールバーの作成方法を皆さんに知っていただければ幸いです。。

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