プログラミング雑記

【CSS】ブラウザでスクロールバーを消す方法 - ブラウザごとの対応が必要

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

はじめに

ブラウザのスクロールバーが表示されると見た目が一気にださく感じることがあります。
今回はCSSでスクロールバーを削除する方法を紹介します。

スクロールバーの消し方

結論からお伝えすると下記のように記載します。

#content{
  /*スクロールバー非表示(IE・Edge)*/
  -ms-overflow-style: none;
  /*スクロールバー非表示(Firefox)*/
  scrollbar-width: none;    
}

#content::-webkit-scrollbar{
  /*スクロールバー非表示(Chrome)*/
  display:none;
}

急にスクロールバーが出てくる現象?

上記のCSSを指定していなくてもスクロールバーは表示されていなかったのに、ある日急にスクロールバーが表示されるようになってしまうことがあります。
これまで2度ほど経験したのですが原因がわからず。
コードを変えたわけでもないし、コンテンツが増えてスクロールが必要になったわけでもないし、なぜだろう。

もしご存じの方がいたらコメントで教えてください。

最後に

ウェブ系の言語を含めたプログラミング言語の年収と習得の難しさをランキングにしてみました。
合わせてご確認ください。

あわせて読みたい
  • この記事を書いた人

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

-プログラミング雑記