注意: この方法は、Webkit ベースのブラウザにのみ適用されます。 ブラウザのスクロールバーが広すぎて見苦しく、日常の開発に影響を及ぼしています。どうすればよいでしょうか? スクロールバーの外観は、2つの部分で構成されています。1. スクロールバーのスライド全体 2. スクロールバースライド内のスライダー CSSでは、スクロールバーは3つの部分から構成されます name::-webkit-scrollbar //全体のスクロールバー stylename::-webkit-scrollbar-track //スクロールバー トラックname::-webkit-scrollbar-thumb //スクロールバーの内部スライダー 注意: 上記 3 つはすべて疑似クラスです。名前を変更したい要素名に変更してください。 例: ページ全体のスクロールバーのスタイルを変更する body::-webkit-scrollbar{ //まずbodyのスクロールバーの幅を変更します: 8px; } body::-webkit-scrollbar-track{// 本体の背景のスクロールバー トラックの色を変更します: rgb(200, 200, 200); 境界線の半径: 5px; } body::-webkit-scrollbar-thumb{//最後に、本体のスクロールバースライドの背景のスタイルを変更します: rgb(120, 120, 120); 境界線の半径: 5px; } ◆ 右側は上のコードを変更した後のスクロールバーのスタイルを示しています ◆ 背景、透明度、境界線、丸い角などの属性をスタイルに追加して、ブラウザをより美しくすることができます 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQL を暗号化および復号化するいくつかの方法 (要約)
>>: Vue は Echarts をインポートして折れ線グラフを実現します
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...
ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...
1. 複合主キーいわゆる複合主キーとは、テーブルの主キーが複数のフィールドで構成され、ビジネス上の意...
<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...
インストールの提案: インストールには .exe を使用せず、圧縮パッケージを使用してください。これ...
目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...
目次ディスク使用量の表示ディスク クリーンアップ (軽々しく使用しないでください)データの移行ディス...
この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。...
1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...
序文:私はずっと、SQL 文がどのように、どのような順序で実行されるのかを知りたいと思っていました。...
目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...
具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...
<br />表の境界線の CSS 構文具体的な内容には、上境界線の幅、右境界線の幅、下境...
この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...