フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという状況によく遭遇します。最も簡単な方法はiscrollプラグインを追加することですが、実はCSSでもこの機能を実現できるようになりました。私も多くの場所で使っています。この3つの方法を見てみましょう。 方法1: スクロールバーの幅を計算して非表示にする このサイトのサイドバーでは、フロントエンドの日報にスクロールバーはありませんが、マウスを移動することでコンテンツをスクロールできます。この技術とは何ですか? 実際には、スクロール バーを配置して非表示にしただけです。 デモ 以下はコードの簡略版です。 <div class="外側のコンテナ"> <div class="インナーコンテナ"> ...... </div> </div> .外側のコンテナ{ 幅: 360ピクセル; 高さ: 200px; 位置: 相対的; オーバーフロー: 非表示; } .内部コンテナ{ 位置: 絶対; 左: 0; 上: 0; 右: -17px; 下部: 0; オーバーフロー-x:非表示; overflow-y: スクロール; } このコードは、スクロール バーを 17 ピクセル右に移動します。これは、スクロール バーの幅とまったく同じです。この値は手動デバッグによって取得されました。 Chrome と IE では問題は見つかりませんでした。 方法2: 3つのコンテナを使用して囲むと、スクロールバーの幅を計算する必要がなくなります。 このコードを最初に見たのは、Microsoft のブログでした。これは、ボックス内のコンテンツを制限するために内部に追加のボックスが追加されていることを除けば、上記の私のアイデアと似ています。こうすることで、スクロールバーを表示せずにスクロールできます。 コードは次のとおりです。 <div class="外側のコンテナ"> <div class="インナーコンテナ"> <div class="content"> ...... </div> </div> </div> //http://caibaojian.com/hide-scrollbar.html からのコード .要素、.外部コンテナ { 幅: 200ピクセル; 高さ: 200px; } .外側のコンテナ{ 境界線: 5px 紫色; 位置: 相対的; オーバーフロー: 非表示; } .内部コンテナ{ 位置: 絶対; 左: 0; オーバーフロー-x:非表示; overflow-y: スクロール; } .inner-container::-webkit-scrollbar { 表示: なし; } 方法3: CSSでスクロールバーを非表示にする 同時に、記事では CSS を通じてスクロールバーを非表示にする方法も紹介されていますが、この方法は IE と互換性がなく、モバイル端末でのみ使用できます。 ChromeとSafari .element::-webkit-scrollbar { 幅: 0 !重要 } IE10以上 .element { -ms-overflow-style: なし; } ファイアフォックス .element { オーバーフロー: -moz-scrollbars-none; } 要約する CSSを使用してスクロールバーを非表示にしてコンテンツをスクロールする方法(3つの方法)についての記事はこれで終わりです。CSSを使用してスクロールバーを非表示にしてコンテンツをスクロールする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を続けて閲覧してください。今後とも123WORDPRESS.COMを応援してください。 |
<<: HTMLインライン要素とブロックレベル要素の基本概念と使用例
>>: Vue グローバル フィルターの概念、注意事項、基本的な使用方法
インライン形式<colgroup>...</colgroup>属性名 属性値...
この記事では、MySQL 8.0.12 の解凍版のインストールと設定方法を記録し、皆様と共有します。...
ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...
1. 需要バックエンドは、フロントエンドがツリー構造(重複データなし)に変換するためのデータを提供し...
Vueに触れたばかりのパートナーの多くは、開発環境ではVueプロジェクトは正常であるが、パッケージ化...
この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...
「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...
Zhihu Discovery コラムのタイトル画像は、通常、以下のように表示されます。明らかに、グ...
複雑なテーブル構造では、一部のセルが垂直方向に複数のセルにまたがるため、列間属性 COLSPAN を...
1. MySQLデータベースにログインするmysql -u ルート -pユーザーテーブルを表示する ...
この記事の例では、ショッピングカート機能を実装するためのjQueryの具体的なコードを参考までに共有...
目次トリガーとは何かトリガーを作成するMySQL 作成構文のキーワードの説明: 1. MySQL ト...
vueの部分は以下のとおりです。 <テンプレート> <ビュークラス="&...
各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...
<br />セマンティクス化は一言で説明することはできないし、まだ公式かつ厳密な定義もあ...