[CSS] スクロールバーの非表示

カルーセル処理をする時などの、スクロールエレメントにセットすると、スクロールバーを非表示にすることができます。

#target{
  overflow:scroll;
  
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#target::-webkit-scrollbar{
  display:none;
}

#targetを対象のエレメントにするだけで、ほとんどのブラウザで適用できます。

応用編

ページのスクロールバーを隙なデザインにしたい場合、cssのanimation-timelineとセットで使うと、素敵なページが作れますよ。ちなみに、現時点で、GoogleChromeしか対応していない、animation-timelineですが、以下のライブラリを使うと、すべてのブラウザで使うことができますよ。 CSSの新機能「animation-timeline」をGoogleChrome以外のブラウザで動作させる方法