CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)

CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)

フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという状況によく遭遇します。最も簡単な方法は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 と互換性がなく、モバイル端末でのみ使用できます。
これは、カスタムスクロールバーの疑似オブジェクトセレクターです::-webkit-scrollbar。詳細については、前の記事を参照してください: CSS3カスタムWebkitスクロールバースタイル

ChromeとSafari

.element::-webkit-scrollbar { 幅: 0 !重要 }
IE10以上

.element { -ms-overflow-style: なし; }
ファイアフォックス

.element { オーバーフロー: -moz-scrollbars-none; }

要約する

CSSを使用してスクロールバーを非表示にしてコンテンツをスクロールする方法(3つの方法)についての記事はこれで終わりです。CSSを使用してスクロールバーを非表示にしてコンテンツをスクロールする方法の詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を続けて閲覧してください。今後とも123WORDPRESS.COMを応援してください。

<<:  HTMLインライン要素とブロックレベル要素の基本概念と使用例

>>:  Vue グローバル フィルターの概念、注意事項、基本的な使用方法

推薦する

VMware CentOS 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル

1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...

Dockerコマンドの学習を1つの記事にまとめる

目次導入ミラーリポジトリログイン引く押す検索ローカル画像管理画像rmiタグ建てる歴史保存負荷輸入コン...

EChartsマルチチャート連携機能の実装プロセス

表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...

JavaScriptはシンプルな日付効果を実装します

JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...

VMware Workstation 仮想マシンのインストール操作方法

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

Dockerイメージの圧縮と最適化操作

Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

Nodejs プラグインと使用方法の概要

このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 12.19....

MySQLウィンドウ関数の具体的な使用法

目次1. ウィンドウ関数とは何ですか? 1. ウィンドウをどのように理解しますか? 2. ウィンドウ...

Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装

目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...

Docker が占有するディスク領域をクリーンアップする方法

Docker は多くのスペースを占有します。コンテナを実行したり、イメージを取得したり、アプリケー...

wavesurfer.js によるオーディオ波形描画の実装

1. レンダリングを見る進むを選択: 後方を選択: コードは次のとおりです(例): <テンプレ...

Vueでブラウザタイトルを動的に設定する方法の詳細な説明

目次ナンセンス文章最初ルーター/index.js 2番目1. プラグインをインストールする2.mai...

DockerコンテナにNFS共有ディレクトリをマウントする実装

以前、https://www.jb51.net/article/205922.htm で、Docke...