方法-スクロールバーを非表示にする
CSSでスクロールバーを非表示にする方法を学びます。
スクロールバーを非表示にする方法
追加overflow: hidden;
して、水平スクロールバーと垂直スクロールバーの両方を非表示にします。
例
body {
overflow: hidden; /* Hide scrollbars */
}
垂直スクロールバーのみ、または水平スクロールバーのみを非表示にするには、overflow-y
またはoverflow-x
:を使用します。
例
body {
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
overflow: hidden
スクロールバーの機能も削除されることに注意してください。ページ内をスクロールすることはできません。
ヒント:overflow
プロパティの詳細については、 CSSオーバーフローチュートリアルまたはCSSオーバーフロープロパティリファレンスを参照してください。
スクロールバーを非表示にしますが、機能は維持します
スクロールバーを非表示にしても、スクロールを継続できるようにするには、次のコードを使用できます。
例
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar
for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /*
IE and Edge */
scrollbar-width: none; /* Firefox */
}
Chrome、Safari、OperaなどのWebkitブラウザーは、非標準の::-webkit-scrollbar
疑似要素をサポートしているため、ブラウザーのスクロールバーの外観を変更できます。IEとEdgeはこの-ms-overflow-style:
プロパティをサポートし、Firefoxはこのscrollbar-width
プロパティをサポートしています。これにより、スクロールバーを非表示にできますが、機能は維持されます。