HTML CSSでスクロールバーを非表示にする方法

html スクロール バーを非表示にする CSS メソッド: 1. Firefox の場合は、「scrollbar-width: none;」を使用して非表示にします; 2. IE の場合は、「-ms-overflow-style: none;」を使用して非表示にします。 」など。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

html css でスクロール バーを非表示にする方法

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

CSS を使用して要素のスクロール バーを非表示にする方法スクロール バーが静止している間、任意の要素をスクロールできますか?

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

Firefox ブラウザ

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

scrollbar-width: none; /* Firefox */

IE ブラウザ

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

-ms-overflow-style: none; /* IE 10+ */

Chrome および Safari ブラウザ

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

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

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

例

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

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

推奨学習: " CSS ビデオ チュートリアル >>

以上がHTML CSSでスクロールバーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。