スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを個別にダウンロードして導入したくありません。そのため、デフォルトのスクロールバーのスタイルを純粋に 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 が保存できないように設定する方法
この記事では、例を使用して MySQL カーソルの原理と使用方法を説明します。ご参考までに、詳細は以...
ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...
大規模な Web サイトでは、多数の同時アクセスを処理するために、Web サイト上の分散負荷分散以上...
目次1. MySQL msiバージョンをダウンロードする2. インストール3. 環境変数を設定する1...
1. readonly 読み取り専用属性なので、値を取得できます2. 無効: 無効な属性、値を取得で...
1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...
次の2つのファイルを結合するには、それらを結合して1.txtに結合します。 # 1.txt ジェリー...
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...
html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...
HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...
私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...
序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...
CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...
目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...