今回やりたいこと

限られた高さを与えられた要素内のコンテンツをスクロールさせたい場合、そのコンテンツの親要素に対して「overflow-y: scroll;」というCSSを書きますよね。
そうした時に、ブラウザのデフォルトのダサいスクロールバーがそのエリア内に表示されてしまいます。

通常のブラウザの右側に表示されているスクロールバーが、さらにコンテンツ内だけにも表示されてしまうイメージです。

もちろん、ユーティリティ上必要な場合もあるかもしれませんが、今回はこれを削除するにあたって気を付けるべきことをまとめます。

CSS

ネットでググると、よく以下のようなコードを付け足すように促されます。


親要素::-webkit-scrollbar {
  display:none;
}

これはこれで問題ありません。これはchromeとSafari対応になります。つまりこれだけではFirefoxとIEへの対応ができていないんですね。

記述する場所が若干違うので注意しましょう。

プロパティ名を覚えるのが面倒なので、今回は記事に残しましたが覚えてしまえば簡単です。


親要素 {
  height: 150px; // コンテンツの高さ
  overflow-y: scroll;
  -ms-overflow-style: none;    // IE, Edge
  scrollbar-width: none;       // Firefox
}

これでスクロールバーの非表示ができていることを確認できました。

今回参考にさせていただいた記事はこちらです。ありがとうございました。