CSSを使用してスクロールバーを隠す方法を学習します。
- 前のページ カスタムスクロールバー
- 次のページ 表示/強制的に表示するスクロールバー
コース推薦：
CSSを使用してスクロールバーを隠す方法を学習します。
スクロールバーを隠す方法 overflow: hidden;、水平和垂直のスクロールバーを同時に隠すことができます。
インスタンス
body {
overflow: hidden; /* スクロールバーを隠します */
}
垂直スクロールバーのみまたは水平スクロールバーのみを隠す場合は、以下を使用します overflow-y または overflow-x：
インスタンス
body {
overflow-y: hidden; /* 垂直スクロールバーを隠します */
overflow-x: hidden; /* 水平スクロールバーを隠します */
}
ご注意ください、overflow:hidden スクロールバーの機能も削除されます。ページ内でのスクロールができません。
スクロールバーを隠しつつ機能を保持
スクロールバーを隠しつつ機能を保持するための以下のコードを使用できます：
インスタンス
/* Chrome、Safari、Operaでスクロールバーを隠します */
.example::-webkit-scrollbar {
display: none;
}
/* IE、Edge、Firefoxでスクロールバーを隠します */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Webkitブラウザ（Chrome、Safari、Operaなど）が非標準の ::-webkit-scrollbar 疑似要素を使用して、ブラウザのスクロールバーの外観を変更することができます。IEおよびEdgeがサポートしています -ms-overflow-style: 属性、Firefoxがサポートしています scrollbar-width これらの属性を使用して、スクロールバーを隠しつつ機能を保持することができます。
関連ページ
チュートリアル：CSSオーバーフロー
リファレンスマニュアル：CSS overflow属性
- 前のページ カスタムスクロールバー
- 次のページ 表示/強制的に表示するスクロールバー
