ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでスライダーを非表示にする方法
#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。 まず、スクロール バーを非表示にし、コンテンツがオーバーフローしたときにスクロール バーを表示する必要がある場合は、overflow: auto スタイルを設定するだけです。スクロール バーを完全に非表示にしたい場合は、overflow: hidden を設定するだけですが、要素のコンテンツがスクロールできなくなります。現在のところ、コンテンツをスクロールしながら要素でスクロール バーを非表示にすることを許可する CSS ルールはありません。これは、特定のブラウザーのスクロール バー スタイルを設定することによってのみ実現できます。 Firefox ブラウザFirefox の場合、スクロール バーの幅をなしに設定できます:CSS でスライダーを非表示にする方法は、[overflow:hidden] を設定することです。スクロールバーを非表示にして、コンテンツがオーバーフローしたときに表示したい場合は、[overflow:auto] を設定するだけです。
scrollbar-width: none; /* Firefox */IE ブラウザIE の場合、 -ms-prefix 属性はスクロールバーのスタイルを定義します:
-ms-overflow-style: none; /* IE 10+ */Chrome と SafariChrome と 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でスライダーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。