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を応援してください。