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

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

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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 が保存できないように設定する方法

推薦する

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

Reactイベントバインディングの詳細な説明

1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...

デザイナーと開発者に役立つ 9 つの超実用的な CSS のヒント

Web デザイナーの頭の中には、仕事に関連する多くの知識が詰まっている必要があります。 CSS は、...

CSS で複数の境界線を実装するためのヒント

1. 複数の国境[1]背景: ボックスシャドウ、アウトライン使用シナリオの多様性を考慮すると、複数の...

Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード

目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...

div間のギャップの解決策

HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...

ウェブデザインにおけるカラーマッチングの優れた例30選

本日は、色彩の応用に関する優れた事例を 30 件集めて、皆さんにご紹介したいと思います。これらの事例...

Centos7でポートを開く方法

CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...

MySQL スライディングオーダー問題の原理と解決の例分析

この記事では、例を使用して、MySQL スライディング順序問題の原理と解決方法を説明します。ご参考ま...

CSS3のbox-shadowプロパティの使い方の詳細な例

CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...

html-webpack-plugin の使用方法の詳細な説明

最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...

MySQL 8.0.22 winx64 のインストールと設定のグラフィックチュートリアル

mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...

MySQLテクノロジーにおけるInnoDBロックの詳細な説明

目次序文1. ロックとは何ですか? 2. InnoDBストレージエンジンのロック2.1 ロックの種類...

フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします...