フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)

フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に CSS で変更します。今回は方法を統一し、コードを直接掲載します。

            &::-webkit-スクロールバー{
              //スクロールバーの背景の幅: 16px;
              背景: #191a37;
              高さ: 14px;
            }

            &::-webkit-スクロールバー-トラック、
            &::-webkit-スクロールバー-サムネイル {
              境界線の半径: 999px;
              幅: 20px;
              境界線: 5px 透明実線;
            }

            &::-webkit-スクロールバー-トラック {
              ボックスの影: 1px 1px 5px #191a37 インセット;
            }

            &::-webkit-スクロールバー-サムネイル {
              //スクロールバーのスライダースタイルを変更します。width: 20px;
              最小高さ: 20px;
              背景クリップ: コンテンツボックス;
              ボックスシャドウ: 0 0 0 5px #464f70 インセット;
            }

            &::-webkit-スクロールバーコーナー{
              背景: #191a37;
            }

これはかなり完全な改造です。

以下は非常に簡潔です。試してみる価値あり

            &::-webkit-スクロールバー{
              幅: 6px;
              高さ: 6px;
              背景: 透明;
            }

            &::-webkit-スクロールバー-サムネイル {
              背景: 透明;
              境界線の半径: 4px;
            }

            &:hover::-webkit-スクロールバー-サムネイル {
              背景: hsla(0, 0%, 53%, 0.4);
            }

            &:hover::-webkit-スクロールバートラック{
              背景: hsla(0, 0%, 53%, 0.1);
            }

これの利点は、変更されたスクロールバーはマウスを動かしたときにのみ表示されるため、良い体験ができることです。

(特定の軸のスクロールバーを非表示にするコードを表示します)

オーバーフロー-x:非表示;

以前も何もなかったと思っていましたが、長い間変化がありませんでした。

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

<<:  Web デザイン ヘルプ: Web フォント サイズ データ リファレンス

>>:  表示しているページのスナップショットを Baidu が保存できないように設定する方法

推薦する

Vueはページdivボックスのドラッグアンドドロップソート機能を実装します

vue は、ページ上の div ボックスのドラッグ アンド ドロップ ソート機能を実装します。 序文...

React dva実装コード

目次ドヴァdvaの使用DVAの実装非同期をサポートルーターの実装成し遂げる:ドヴァdva は、red...

Vue3でelement-plusを使用する方法の詳細な説明

目次1. インストール2. main.jsにインポートする3. 使用Vue3がリリースされてからしば...

uniappを使用してWeChatミニプログラムでEChartsを使用する方法

今日は、uniapp を使用して Echarts を統合し、マップ チャートを表示します。 mpvu...

コンパイル/サーバーなしでブラウザにCommonJSモジュールを実装する

目次導入1. one-click.jsとは2. パッケージングツールはどのように機能しますか? 3....

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

多くの場合、クエリの結果は最大で 1 つのデータ レコードになることが予想されます。この場合、制限 ...

Javascript 操作メカニズム イベントループ

目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

Vueはメニューナビゲーションを実装するためにelement-uiを使用します

この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...

MySQL Innodb インデックス メカニズムの詳細な紹介

1. インデックスとは何ですか?インデックスは、ストレージ エンジンがレコードをすばやく検索するため...

Linux でマウントされたファイルシステムの種類を表示する方法

序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...

htm 初心者ノート(初心者は必ず読んでください)

1. HTMLとは何かHTML (ハイパーテキスト マークアップ言語): ハイパーテキスト マーク...

JavaScriptページングコンポーネントの使い方の詳細な説明

ページネーションコンポーネントはWeb開発でよく使われるコンポーネントです。ページネーション機能を実...

Mysql-connector-java ドライバのバージョン問題の概要

Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...