CSS を使用して要素のスクロールバーを非表示にするサンプルコード

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか?

まず、スクロール バーを非表示にして、コンテンツがオーバーフローしたときに表示する必要がある場合は、overflow: auto スタイルを設定するだけで済みます。スクロール バーを完全に非表示にしたい場合は、overflow: hidden を設定するだけですが、これにより要素のコンテンツはスクロールできなくなります。現時点では、要素がスクロールバーを非表示にしながらもコンテンツのスクロールを可能にする CSS ルールはありません。これは、特定のブラウザのスクロールバー スタイルを設定することによってのみ実現できます。

ファイアフォックス

Firefox の場合、スクロールバーの幅を none に設定できます。

スクロールバーの幅: なし; /* Firefox */

インターネットエクスプローラー

IE の場合、スクロールバーのスタイルを定義するには -ms-prefix 属性を使用する必要があります。

-ms-overflow-style: なし; /* IE 10+ */

Chrome および Safari ブラウザ

Chrome および Safari ブラウザの場合、CSS スクロールバー セレクターを使用し、display:none を使用して非表示にする必要があります。

::-webkit-スクロールバー{
  display: none; /* Chrome Safari */
}

注: スクロール バーを非表示にする場合は、コンテンツがスクロール可能であることを確認するために、オーバーフロー表示を自動またはスクロールに設定するのが最適です。

上記の CSS プロパティとオーバーフローを使用して、水平スクロール バーを非表示にして垂直スクロール バーを許可する次の例を実装します。

.demo::-webkit-スクロールバー{
  display: none; /* Chrome Safari */
}
.デモ{
  スクロールバーの幅: なし; /* firefox */
  -ms-overflow-style: なし; /* IE 10+ */
  オーバーフロー-x:非表示;
  オーバーフロー-y: 自動;
}

要約する

上記は、CSS を使用して要素のスクロール バーを非表示にするサンプル コードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

>>:  IDEA2021 tomcat10 サーブレットの新しいバージョンの落とし穴

推薦する

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

Linux での MySQL 5.7.19 (tar.gz) インストール グラフィック チュートリアル

Linux で MySQL-5.7.19 バージョンをインストールするための最初のチュートリアル。す...

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

iFrameは背景を覆うポップアップレイヤーとして使うのに最適です

最近、私は「ぶどうコレクション」というプロジェクトに取り組んでいます。簡単に言うと、Budou ペー...

H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

自己学習型ゲーム開発の道において、最も充実した瞬間は、自分でミニゲームを作り、友達と共有して試しにプ...

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

MySQL 5.6 マスタースレーブエラー報告の実践記録

1. 問題の症状バージョン: MySQL 5.6、従来の binlog ファイルと pos 方式を使...

CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとし...

Ubuntu 20.04 LTS で Java 開発環境を構成する

Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...

Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴

まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...

小さな画面のモバイルデバイス向けにWebページを設計する際に注意すべきこと

その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...

MySQLデータベースで列を追加、削除、変更する方法

この記事では、例を使用して、MySQL データベースの列を追加、削除、および変更する方法について説明...

Nginx ロードバランシング/SSL 構成の実装

負荷分散とは何ですか?ドメイン名が複数の Web サーバーを指している場合は、nginx ロード バ...

CSS を使用して正方形の div を実装する 2 つの方法

目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...