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

領域をはみ出す要素の表示

overflowにautoやscrollを設定してスクロール形式にする

<div class="container">
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
  <p>テキスト</p>
</div>
<style>
  .container {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    overflow-y: auto;
  }
</style>

スクロールバーの非表示

デザイン上、スクロールバーを非表示にしたいケースがある

CSS でプロパティを設定

ブラウザごとに設定が異なる

Google Chrome, Safari, Microsoft Edge

<style>
  .container::-webkit-scrollbar {
    display: none;
  }
</style>

Firefox

<style>
  .container {
    scrollbar-width: none;
  }
</style>

まとめて設定

<style>
  /* Firefox */
  .container {
    scrollbar-width: none;
  }
  /* Google Chrome, Safari, Microsoft Edge */
  .container::-webkit-scrollbar {
    display: none;
  }
</style>