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

CSS でスクロールを非表示にする方法: 1. Firefox では、「scrollbar-width: none; /* Firefox */」属性を使用してスクロール バーを非表示にできます。2. IE ブラウザでは、 「 -ms-prefix」属性はスクロール バーのスタイルを定義します。 3. Chrome と Safari では、CSS スクロール バー セレクターを使用し、「display:none」で非表示にすることができます。

このチュートリアルの動作環境: Windows 10 システム、css3 バージョン、DELL G3 コンピューター

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 では、CSS スクロールバー セレクターを使用し、display:none:

を使用して非表示にする必要があります。

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

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

例

上記の 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 ビデオ チュートリアル 」

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