CSSでスクロールバーのスタイルを削除する方法

CSS でスクロール バー スタイルを削除する方法は、スクロール バーに [overflow:hidden] スタイルを設定し、スクロール バーを完全に非表示にすることです。たとえば、[::-webkit-scrollbar {display: none] のようにします。 ; /* Chrome Safari */}]。

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

スクロール バー スタイルを削除したい場合は、スクロール バーを削除するという目的を達成するために、実際にスクロール バー スタイルを非表示にすることを選択できます。

スクロール バーを非表示にし、コンテンツがオーバーフローしたときにスクロール バーを表示する必要がある場合は、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 サイトの他の関連記事を参照してください。