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

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

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

推薦する

MySQLデータベースはMMM高可用性クラスタアーキテクチャを実装します

コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...

ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法

実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...

CSS で水平方向と垂直方向に中央揃えする 10 の方法を教えます (要約)

面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...

JS のディープコピーとシャローコピーの詳細

目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...

AIX マウント NFS の書き込み効率が低い場合の解決策

NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...

HTMLメタの大きな役割

メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...

mysql8.0.14.zip のインストール中にデータ フォルダを自動的に作成できませんでした。サービスを開始できません。

今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

MySql 5.6.36 64 ビット グリーン バージョンのインストール グラフィック チュートリアル

MySQL のインストールについてはインターネット上に多くの記事がありますが、今日ノート PC にイ...

Reactはダブルスライダークロススライドを実装します

この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...

JavaScript で一意の ID を生成するいくつかの方法

考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

Linux 上の MariaDB は root ユーザーで起動します (推奨)

最近、セキュリティ製品をテストする必要があったため、mariadb の起動ユーザーを root に調...

MySQL 8.0 でのチェック制約の実装

みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...

特定の MySQL テーブルの完全データと増分データをメッセージ キューに同期する - ソリューション

目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...