【CSS】スクロールバーを消す方法

こんにちは、今回はCSSでブラウザのスクロールバーを消す方法を紹介したいと思います。

コーディングの際、スクロールバーが邪魔になることがあります。そういったときに役立つ方法になります。

ただそれだけだとスクロール出来るか分からなくなってしまうので、デザイン上スクロール出来るように分かるようにするか、邪魔にならないスクロールバーを別途用意してあげる必要があります。

今回はスクロールバーを消すところまで説明させていただきます。

ではDEMOを用意したのでまずはそちらをご覧ください。

→DEMO

コンテンツ内でスクロールバーが消えていることが確認出来きましたでしょうか。

該当部分のCSSのソースは以下のようになります。

■CSS

スクロールバーを表示している要素に追加で書く形ですね。

ここで重要なのはブラウザによって方法が異なる所です。それぞれのブラウザに対応した記述が必要になります。

ですが大した量ではないので忘れずに記述するようにしましょう。

再度DEMOのリンクを以下に載せときます。

→DEMO

スクロールバーを消すだけなら簡単に出来ますが、ここからカスタマイズしたいとなると話は変わって来ます。

CSSで対応できるのか、それともjavascriptで対応するのか・・・など。

ざっと現時点で調べた感じですと、IE以外ならどうやら対応できそうですね。

今後スクロールバーのカスタイズについても紹介できればなと思います。

では今回はこの辺で・・・、以上クリエイターズメモでした。