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

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 を応援していただければ幸いです。

<<:  MySQL を暗号化および復号化するいくつかの方法 (要約)

>>:  Vue は Echarts をインポートして折れ線グラフを実現します

推薦する

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

SQL 文における複合主キーと結合主キーに関する予備的研究

1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...

ウェブデザインスキル:中国語と英語が混在するウェブページの上位表示の問題

<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...

Windows システムでの MySQL 8.0.21 インストール チュートリアル (図とテキスト)

インストールの提案: インストールには .exe を使用せず、圧縮パッケージを使用してください。これ...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

Dockerでデータディレクトリを移行する方法

目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...

タブ効果を実現する js 開発プラグイン

この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。...

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

SQL ステートメント実行の詳細な説明 (MySQL アーキテクチャの概要 -> クエリ実行プロセス -> SQL 解析順序)

序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...

React Fiber構造の作成手順

目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

表の境界線の CSS 構文

<br />表の境界線の CSS 構文具体的な内容には、上境界線の幅、右境界線の幅、下境...

Bootstrap 3.0 学習ノート CSS関連補足

この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...