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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!