CSS スクロールバースタイル変更コード

CSS スクロールバースタイル変更コード

CSS スクロールバースタイル変更コード

.scroll::-webkit-scrollbar { // 垂直および水平スクロールバーの幅 width: 1px;
    高さ: 1px;
}
.scroll::-webkit-scrollbar-thumb { // スクロールバーの背景バーのスタイル border-radius: 1px;
    -webkit-box-shadow: インセット 0 0 5px rgba(0,0,0,0.2);
    背景: #5b5f63;
}
.scroll::-webkit-scrollbar-track { // スクロールバーボタン style-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    境界線の半径: 1px;
    背景: #00284d;
}

要約する

上記は、私が紹介した CSS スクロールバー スタイルを変更するためのコードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  ドキュメントの場所の比較

>>:  フォームのチェックボックスとラジオボタンのテキストを揃えるコード

推薦する

Vue で className として空の文字列を使用することはなぜ推奨されないのですか?

目次空の文字列 '' と null を比較するケース1: 空の文字列を使用する &#...

Linux で Hadoop クラスターをインストールするための詳細な手順

目次1. usrディレクトリにHadoopディレクトリを作成し、インストールパッケージをそのディレク...

Docker での RocketMQ の詳細なインストールと使用

RocketMQ イメージを検索するには、Docker の hub.docker.com で検索する...

IDEA の Docker プラグインを介して Springboot プロジェクトを公開する方法の詳細なチュートリアル

1. Dockerfileを書く(1)プロジェクト名を右クリックして新しいテキストファイルを作成し、...

HTMLタグのtarget属性の使用法

1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...

Vue3.0 異なる解像度のコンピュータの適応操作

まず依存関係をインストールする必要があります npm i lib-flexible-computer...

ファイアウォールルールの設定とコマンド(ホワイトリスト設定)の詳しい説明

1. ファイアウォールルールを設定する例1: ポート8080を外部に公開する ファイアウォールコマン...

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...

CSS の記述基準と順序を共有する [すべての人に使用を推奨]

CSSの記述順序1. 位置属性(位置、上、右、z-index、表示、フロートなど) 2. サイズ(...

CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)

** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...

vue3でDOMをマウントするためのプラグインを書く際の問題について

vue2と比較して、vue3にはアプリの概念が追加され、vue3プロジェクトの作成も // メイン....

Centos7 esxi6.7 テンプレートの実際のアプリケーションの詳細な説明

1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...

MySQL 権限制御の詳細分析

目次1. グローバルレベル2. データベースレベル3. 表面レベル4. 列レベルの権限5. サブルー...

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...