スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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...
このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...
導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...
背景 - オンラインアラートオンライン サーバーがアラームを発し、ディスク使用率 disk.util...
目次CentOS7環境での設定コマンド手順1. DHCP設定ファイルを設定する2. グローバル構成を...
ラベル表示モード(重要) divタグとspanタグ1. スタイルはまったく同じですが、ラベルが異なり...
nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...
この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...
絶対長さピクセルpx はピクセル値であり、メートルやセンチメートルのような固定の長さです。相対的な長...
1. GraphVis 公式サイトにアクセスして、対応する js をダウンロードします。js の新し...
では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...
MySQL には多くのデータベース管理ツールがあります。作業効率の向上に役立つ優れた GUI ツール...
この記事では、MySQL トリガーの定義と使用方法について説明します。ご参考までに、詳細は以下の通り...
目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...
目次序文必要成し遂げる最初のレンダリングメニュー項目をクリックしますスタイルの区別デフォルトのハイラ...