スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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 を学習する際に、vscode ターミナルで常に webpack 命令を使用すると、次のよう...
地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...
1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...
Web デザイナーの頭の中には、仕事に関連する多くの知識が詰まっている必要があります。 CSS は、...
1. 複数の国境[1]背景: ボックスシャドウ、アウトライン使用シナリオの多様性を考慮すると、複数の...
目次安定導入手ぶれ補正シーン1(マウスの動き込み)手ぶれ補正シーン2(キーボードのキー)関数のスロッ...
HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...
本日は、色彩の応用に関する優れた事例を 30 件集めて、皆さんにご紹介したいと思います。これらの事例...
CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...
この記事では、例を使用して、MySQL スライディング順序問題の原理と解決方法を説明します。ご参考ま...
CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...
最近、React プロジェクトで初めてhtml-webapck-pluginプラグインを使用しました...
mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...
目次序文1. ロックとは何ですか? 2. InnoDBストレージエンジンのロック2.1 ロックの種類...
フレックス レイアウトは間違いなくシンプルで使いやすいです。レイアウトをよりシンプルかつ高速にします...