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

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

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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 カーソルの原理と使用例の分析

この記事では、例を使用して MySQL カーソルの原理と使用方法を説明します。ご参考までに、詳細は以...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

MySQLのマスタースレーブ構成を使用して、読み取りと書き込みの分離を実現し、データベースの負荷を軽減します。

大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...

MySQL msiバージョンのダウンロードとインストールの初心者向けの詳細なグラフィックチュートリアル

目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...

HTMLフォーム属性のreadonlyとdisabledの使い方

1. readonly 読み取り専用属性なので、値を取得できます2. 無効: 無効な属性、値を取得で...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

Linuxはjoin -a1を使用して2つのファイルを結合します

次の2つのファイルを結合するには、それらを結合して1.txtに結合します。 # 1.txt ジェリー...

MySQLの半同期の詳細な説明

目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...

Pagoda Panel のインストール時にサーバーがデータベースにリモート接続できない問題の解決策

自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...

HTML webpackプラグインの使用に関する簡単な分析

html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

クールなネオンライト効果を実現する純粋な CSS (デモ付き)

私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...

MySQLアカウントのパスワード変更方法(概要)

序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...

CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています

CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...

Vue3 AST パーサー - ソースコード分析

目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...