CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。

ブラウザのスクロールバーが広すぎて見苦しく、日常の開発に影響を及ぼしています。どうすればよいでしょうか?

スクロールバーの外観は、2つの部分で構成されています。1. スクロールバーのスライド全体 2. スクロールバースライド内のスライダー

CSSでは、スクロールバーは3つの部分から構成されます

name::-webkit-scrollbar //全体のスクロールバー stylename::-webkit-scrollbar-track //スクロールバー トラックname::-webkit-scrollbar-thumb //スクロールバーの内部スライダー

注意: 上記 3 つはすべて疑似クラスです。名前を変更したい要素名に変更してください。

例: ページ全体のスクロールバーのスタイルを変更する

body::-webkit-scrollbar{ //まずbodyのスクロールバーの幅を変更します: 8px;

}

body::-webkit-scrollbar-track{// 本体の背景のスクロールバー トラックの色を変更します: rgb(200, 200, 200);

境界線の半径: 5px;

}

body::-webkit-scrollbar-thumb{//最後に、本体のスクロールバースライドの背景のスタイルを変更します: rgb(120, 120, 120);

境界線の半径: 5px;

}

◆ 右側は上のコードを変更した後のスクロールバーのスタイルを示しています

◆ 背景、透明度、境界線、丸い角などの属性をスタイルに追加して、ブラウザをより美しくすることができます

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。