スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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 が保存できないように設定する方法
序文JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたと...
この記事の例では、ストップウォッチタイマーを実装するためのJSの具体的なコードを参考までに共有してい...
デフォルトでは、テーブルの幅と高さはコンテンツに応じて自動的に調整されます。テーブルの幅と高さを手動...
モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...
説明: テキストエリアの値の改行を新しい行に変更しますコードをコピーコードは次のとおりです。 <...
<br />ソース コード内で表の構造を明確に区別するために、HTML 言語では、表のヘ...
目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...
1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...
目次1. Dockerのセキュリティ問題2. Dockerアーキテクチャの欠陥とセキュリティメカニズ...
最近のプロジェクトに取り組んでいるとき、下の図に示すように、画像を参照すると常に下部に空白スペースが...
1. Dockerをインストールします。参考URL: Docker 入門インストールチュートリアル ...
「Tik Tok」も大人気で、ユーザー数は7億人と言われています。今日は、注目を集めるためにTikT...
目次サーバー層でのフルテーブルスキャンの影響InnoDB におけるフルテーブルスキャンの影響Inno...
目次1. ストアドプロシージャに関連する概念2. ストアドプロシージャの使用1) ストアドプロシージ...
MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...