スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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 が保存できないように設定する方法
コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...
実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...
面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...
目次1. 浅いコピーとはどういう意味ですか? 2. ディープコピーとはどういう意味ですか? 3. デ...
NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...
メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...
今日システムを再インストールした後、コンピューターに mysql を再インストールし、ZIP ファイ...
前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...
MySQL のインストールについてはインターネット上に多くの記事がありますが、今日ノート PC にイ...
この記事では、Reactでダブルスライダークロススライドを実装するための具体的なコードを参考までに共...
考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...
この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...
最近、セキュリティ製品をテストする必要があったため、mariadb の起動ユーザーを root に調...
みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。今回はMySQL 8.0で追...
目次1. 当初の需要2. 解決策3. 運河の導入と設置運河の仕組み建築インストール4. 検証1. 当...