CSSの力でスクロールバーを非表示にする 👀

本当はこの記事で書こうと思っていたことなのですが、-webkit-overflow-scrolling: touchが不要になっていたことに驚きすぎて、記事を分けることにしました。

さて、overflow: scrollを実装するとき、「スクロールバーを消したい」という要望を受けることがそれなりにあります。
実はスクロールバーにもスタイルが当てられるので、そんなときはCSSの力でCSSを消すことができるのです。

body {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

例えば、bodyのスクロールバーを消したかったらこんな感じです。

body {
  -ms-overflow-style: none;
}

これが、IE。

body {
  scrollbar-width: none;
}

これが、Firefox。

body {
  &::-webkit-scrollbar {
    display: none;
  }
}

これが、Chrome、Safari用の記述です。
ユーザビリティ的に消すかどうかは慎重に判断する必要がありますが、消すこと自体は簡単なのです。

こちらからは以上です。

みかづきブログ・カスタム