スクロールバーの美化効果を実現するための CSS3 のサンプル コード

スクロールバーの美化効果を実現するための CSS3 のサンプル コード

具体的なコードは次のとおりです。

/*スクロールバーの幅*/

    ::-webkit-スクロールバー{
        幅:9px;
        高さ:9px;
    }

/* 外側のトラック。 display:none を使用して非表示にしたり、背景画像を追加してディスプレイの色を変更したりできます*/

    ::-webkit-スクロールバートラック{
        幅: 6px;
        背景色:#0d1b20;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        境界線の半径:2em;
    }

/*スクロールバーの設定*/

    ::-webkit-スクロールバー-サムネイル {
        背景色:#606d71;
        背景クリップ:パディングボックス;
        最小高さ:28px;
        -webkit-border-radius: 2em;
        -moz-border-radius: 2em;
        境界線の半径:2em;
    }
/*スクロールバーが移動する背景*/

    ::-webkit-スクロールバー-サムネイル:ホバー{
         背景色:#fff;
    }

CS

::-webkit-スクロールバー { }
::-webkit-スクロールバーボタン { }
::-webkit-スクロールバートラック { }
::-webkit-スクロールバー-トラックピース { }
::-webkit-スクロールバー-サムネイル { }
::-webkit-スクロールバーコーナー { }
::-webkit-リサイザー { }

上記の CSS コードによって制御される領域の関係は次のとおりです。

::-webkit-scrollbar スクロールバー全体。その属性には、幅、高さ、背景、境界線 (ブロックレベル要素と同様) などが含まれます。
::-webkit-scrollbar-button スクロールバーの両端にあるボタン。 display:none を使用して非表示にしたり、背景画像や色を追加して表示効果を変更したりできます。
::-webkit-scrollbar-track 外側のトラック。 display:none を使用して非表示にしたり、背景画像や色を追加して表示効果を変更したりできます。
::-webkit-scrollbar-track-piece 内部トラック、スクロールバーの中央部分 (削除済み)。
::-webkit-scrollbar-thumb スクロールバーのドラッグ可能な部分
::-webkit-scrollbar-corner コーナー
::-webkit-resizer は右下隅のドラッグブロックのスタイルを定義します

CSS3 を使用してスクロール バーの美化効果を実現するサンプル コードに関するこの記事はこれで終わりです。CSS3 スクロール バーの美化に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  HTMLフローティングプロンプトボックス機能の実装コード

>>:  JavaScript 配列メソッドの詳細な例

推薦する

Centos7 から Centos8 へのアップグレードに関するチュートリアル (画像とテキスト付き)

正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...

Linux でのマルチスレッドにおけるフォークの紹介

目次質問:ケース(1)子スレッドを作成する前にフォークするケース(2)子スレッドを作成した後にフォー...

CentOS7 に ElasticSearch 6.4.1 をインストールするための詳細なチュートリアル

1. ElasticSearch 6.4.1 インストール パッケージを次の場所からダウンロードしま...

W3C チュートリアル (11): W3C DOM アクティビティ

ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...

JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....

Centos7 システムでの python2 と python3 の共存

最初のステップは、Python のバージョン番号とインストール パスを確認することです。 上記のビュ...

Dockerfileの指示と基本構造の説明

Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...

CSSインジェクションの知識の要約

最近のブラウザでは、CSS 内で JavaScript を実行することはできなくなりました。以前は、...

webpackでvue環境を構築する際の異常なエラーを解決する

目次まず、package.jsonを設定します次にwebpackツールをインストールしますwebpa...

Vue.js $refs 使用例の説明

プロパティやイベントがあるにもかかわらず、JavaScript で子コンポーネントに直接アクセスする...

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

<td></td> タグの境界線スタイルがブラウザに表示されない問題の解決方法

質問: 360ブラウザの互換モードなど、一部のブラウザでは、 <td style="...

JS オブジェクトのコピー (ディープ コピーとシャロー コピー)

目次1. 浅いコピー1. Object.assign(ターゲット、ソース、ソース...) 2. スプ...

Win10 での MySQL 8.0 ログインでユーザー 'root'@'localhost' のアクセスが拒否される (パスワード使用: YES) 問題の解決方法

最近、MySQL を学び始めました。インストールはスムーズに進み、インターネット上の既成のチュートリ...

WeChatアプレットでグローバル変数を監視する方法

最近、仕事で問題に遭遇しました。グローバル変数 red_heart があります。これは多くの場所で使...