フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという状況によく遭遇します。最も簡単な方法は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 グローバル フィルターの概念、注意事項、基本的な使用方法
1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...
目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...
表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...
JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...
仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...
Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...
スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...
このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...
このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....
目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...
目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...
Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...
1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...
目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...
以前、https://www.jb51.net/article/205922.htm で、Docke...