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

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

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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+Element UIはドロップダウンメニューのカプセル化を実現します

この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法

導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...

Linux でディスク IO を表示し、読み取りと書き込みで高い IO を占有するプロセスを見つけます。

背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...

CentOS7 環境での DHCP 設定チュートリアル

目次CentOS7環境での設定コマンド手順1. DHCP設定ファイルを設定する2. グローバル構成を...

CSSタグの表示モードの詳細な説明

ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...

CSS における px、rem、em、vh、vw の違いを簡単に分析します

絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...

VueはGraphVisを使用して無限に拡張された関係グラフを開発します

1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

データベース管理に役立つ 5 つの MySQL GUI ツール

MySQL には多くのデータベース管理ツールがあります。作業効率の向上に役立つ優れた GUI ツール...

MySQL トリガーの定義と使用方法の簡単な例

この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...

Linuxサーバーのディスク容量を拡張する方法

目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...

Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します

目次序文必要成し遂げる最初のレンダリングメニュー項目をクリックしますスタイルの区別デフォルトのハイラ...