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 サーブレットの新しいバージョンの落とし穴

推薦する

mysql8.0.18 で winx64 をインストールするための詳細なチュートリアル (画像とテキスト付き)

MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...

HTML+CSS+JS でスタックカルーセル効果を実装するサンプルコード

効果:スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...

Zabbixのカスタム監視項目とトリガーについて

目次1. 監視ポート関係の説明操作する2. 監視サービス関係の説明操作する3. テンプレートのインポ...

MySQLがlocalhost経由でデータベースに接続できない問題に対する完璧な解決策

問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...

MySQL は SQL ステートメントの最新のレコードをクエリします (最適化)

最悪の選択肢は、結果を時間順に並べ替えて最初のものを取ることです。 *から選択 ここで、create...

MySQL での大規模トランザクションによって発生する挿入の遅延ケースの分析

【質問】 INSERT 文は最も一般的な SQL 文の 1 つです。最近、MySQL サーバーが同時...

VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル

VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...

HTML Selectは、デフォルトの選択を設定するためにselected属性を使用します。

オプションに属性 selected = "selected" を追加すると、それ...

Dockerはdockerfileを使用してnode.jsアプリケーションを起動します

Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...

Linux システムの /etc/fstab ファイルの詳細な解釈

序文 [root@localhost ~]# cat /etc/fstab # #/etc/fsta...

MySQL における ${param} と #{param} の違い

${param}によって渡されるパラメータは、テーブル名やフィールド名を渡すなど、SQL文の一部と...

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows)

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカ...

HTMLフォーム要素の包括的な理解

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<!DO...

mysqlはコンマに基づいてデータ行を複数の行に分割します

目次分離効果コマンドラインの説明関与する機能分離効果-- 別居前1,2,3,4 -- 別居後1 2 ...