【保存版】CSSでスクロールバーを常に表示する方法｜Mac・iPhone・Android対応のクロスブラウザ完全ガイド

「スクロールできるのに気づかれない」「Macだとスクロールバーが消えてしまう」「Chromeでは表示されるのに、iPhoneだと出てこない」──Web制作の現場でよく相談される悩みの中でも、“スクロールバー問題”は特に多いテーマです。とくに最近は、カードデザインや横スクロール、表組みなど、ユーザーに「スクロールできることを伝える」必要があるUIが増えたことで、スクロールバーを“常に表示”したいというニーズが高まっています。

しかし現実には、macOS・iOS・Android・Windows・各ブラウザ（Chrome / Safari / Firefox / Edge）で仕様がバラバラで、CSSだけで完全に統一するのが難しい場面もあります。「どう書けば全ブラウザで確実に出せる？」「iPhoneだけ出てくれないのはなぜ？」といった疑問を持ったまま、試行錯誤している方も多いのではないでしょうか。

本記事では、こうした“スクロールバー常時表示”にまつわる悩みを、OS・ブラウザの仕様／CSSプロパティ／代替案／実務で使えるコードの観点から徹底的に解消します。 とくに macOS の「スクロールバーが自動で隠れる仕様」や、iOS Safari の技術的制限、 ::-webkit-scrollbar と scrollbar-width のブラウザ対応など、誤解されやすいポイントを丁寧に整理しながら、実務でコピペして使える具体的な実装を紹介します。

格安ドメイン取得サービス─ムームードメイン─

CSSでスクロールバーを常に表示させる全手法とクロスブラウザ対応

スクロールバーを常に表示させるには、Webkit系ブラウザ(Chrome/Safari/Edge)とFirefoxで異なるCSSプロパティを併用する必要があります。以下のコードをコピペすれば、主要ブラウザすべてでスクロールバーが常時表示されます。

Chrome・Safari・Edge対応::-webkit-scrollbar で強制表示

Webkit系ブラウザでスクロールバーを常に表示するには、::-webkit-scrollbar 擬似要素を使って明示的にスタイルを指定します。

.scroll-container {
  overflow: auto;
  height: 400px; /* スクロール領域の高さを指定 */
}

/* Webkit系ブラウザ用 */
.scroll-container::-webkit-scrollbar {
  width: 12px; /* 縦スクロールバーの幅 */
  height: 12px; /* 横スクロールバーの高さ */
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* トラック(背景)の色 */
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888; /* スクロールバー本体の色 */
  border-radius: 6px; /* 角丸にする場合 */
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555; /* ホバー時の色 */
}

ポイント:

• ::-webkit-scrollbar に width や height を指定することで、Macでもスクロールバーが消えずに常に表示されます
• width は縦スクロールバー、height は横スクロールバーの太さを制御します
• track（背景）と thumb（バー本体）を分けて色指定できます

Firefox対応scrollbar-width と scrollbar-color の記述

Firefoxでは標準CSSプロパティの scrollbar-width と scrollbar-color を使用します。

.scroll-container {
  overflow: auto;
  height: 400px;

  /* Firefox用 */
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: #888 #f1f1f1; /* バー本体 トラック背景 */
}

ポイント:

• scrollbar-width: thin で細いスクロールバーを常時表示（auto はデフォルト幅）
• scrollbar-color の第1引数がバー本体、第2引数がトラック背景の色
• Firefoxでは細かいカスタマイズはできませんが、この指定で常に表示されます

クロスブラウザ対応の完全版:

.scroll-container {
  overflow: auto;
  height: 400px;

  /* Firefox用 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Webkit系ブラウザ用 */
.scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

基本プロパティ overflow: scroll と auto の挙動の違い

overflow プロパティの値によって、スクロールバーの表示挙動が変わります。

/* 常にスクロールバーを表示（内容が少なくても表示） */
.always-show {
  overflow: scroll;
}

/* 内容が溢れた時だけスクロールバーを表示 */
.show-when-needed {
  overflow: auto;
}

/* 縦横を個別に制御 */
.vertical-only {
  overflow-x: hidden; /* 横スクロール無効 */
  overflow-y: scroll; /* 縦スクロールは常に表示 */
}

違いの比較表:

プロパティ	スクロールバー表示	使いどころ
overflow: scroll	内容量に関わらず常に表示（非アクティブでもスペースが確保される）	スクロール可能であることを明示したい場合
overflow: auto	内容が溢れた時だけ表示	一般的な用途。ただしMacでは::-webkit-scrollbarの指定がないと消える
overflow: hidden	表示されず、スクロールも不可	意図的にスクロールを無効化したい場合

推奨設定:

• Macでスクロールバーを確実に常に表示させたいなら、overflow: auto + ::-webkit-scrollbar のスタイル指定が最適
• overflow: scroll だけでは、Macのシステム設定次第でバーが自動的に隠れます
• 横スクロールだけを常に見せたい場合は overflow-x: scroll と overflow-y: hidden を組み合わせます

<div class="scroll-container">
  <!-- ここに長いコンテンツ -->
  <p>コンテンツ1</p>
  <p>コンテンツ2</p>
  <!-- ... -->
</div>

これで Chrome、Safari、Edge、Firefox のすべてでスクロールバーが常に表示されるようになります。

::-webkit-scrollbar - CSS | MDN

::-webkit-scrollbar は CSS の擬似要素で、スクロール可能なオーバーフローを持つ要素のスクロールバーのスタイルに影響を与えます。

developer.mozilla.org

まずは無料体験・説明会に参加を♪【Winスクール】

なぜMacではスクロールバーが消えるのか?OSとブラウザの仕様

Macでスクロールバーが自動的に隠れてしまうのは、macOSのシステム設定がブラウザの表示に影響を与えているためです。この仕様を理解すれば、CSSでの対策がなぜ必要なのかが明確になります。

Mac OSの「スクロールバーの表示」設定とCSSの優先順位

macOSには「システム設定 > 一般 > スクロールバーの表示」という項目があり、以下の3つから選択できます。

• スクロール時に表示（デフォルト）: スクロール操作をしている間だけバーが表示される
• マウスまたはトラックパッドに基づいて自動的に表示: 接続デバイスによって表示が変わる
• 常に表示: 常にスクロールバーが表示される

問題点: 多くのMacユーザーはデフォルトの「スクロール時に表示」を使っており、通常時はスクロールバーが完全に消えます。これはOS側の仕様であり、通常のHTML/CSSではこの設定を上書きできません。

CSSの優先順位:

/* これだけではMacでバーが消える */
.container {
  overflow: auto;
}

/* ::-webkit-scrollbarを指定すると、OS設定より優先される */
.container {
  overflow: auto;
}

.container::-webkit-scrollbar {
  width: 10px; /* この指定でOS設定を上書き */
}

::-webkit-scrollbar 擬似要素を使ってスクロールバーのスタイルを明示的に指定すると、macOSのシステム設定よりもCSSが優先されます。これが「Mac スクロールバー 消える」問題の根本的な解決策です。

WindowsとMacでデザインが異なる原因と対策

WindowsとMacでは、スクロールバーのデフォルトデザインとレンダリング方式が大きく異なります。

デフォルトの見た目の違い:

OS	スクロールバーの特徴
Windows	常に表示され、グレー系の立体的なデザイン。幅は約17px
Mac	半透明で細く、スクロール時のみ表示。幅は約15px（細い）

対策コード: WindowsとMacで統一されたデザインにするには、::-webkit-scrollbar で明示的にスタイルを指定します。

.unified-scrollbar {
  overflow: auto;

  /* Firefox用 */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}

/* Webkit系：OS問わず同じデザインを適用 */
.unified-scrollbar::-webkit-scrollbar {
  width: 10px; /* 統一された幅 */
  height: 10px;
}

.unified-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* 半透明グレー */
  border-radius: 10px;
}

.unified-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* 半透明ダークグレー */
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box; /* 余白を作って細く見せる */
}

.unified-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
  background-clip: padding-box;
}

このコードにより、WindowsでもMacでも同じ見た目のスクロールバーが常に表示されます。

ブラウザごとの微妙な差異:

• Chrome/Edge: ::-webkit-scrollbar が完全にサポートされ、細かいカスタマイズが可能
• Safari: 同じく ::-webkit-scrollbar をサポートするが、一部プロパティ（borderなど）の挙動がChromeと微妙に異なる場合がある
• Firefox: 標準の scrollbar-width と scrollbar-color のみサポート。細かいデザイン調整は不可

「スクロールできるか分からない」を防ぐためのUI設計論

Macでスクロールバーが消えることで起きる最大の問題は、ユーザーがスクロール可能であることに気づかないことです。特に横スクロールは致命的です。

問題が起きやすいケース:

1. 横長のテーブル: Macユーザーは横スクロールできることに気づかず、右側の列を見逃す
2. モーダルウィンドウ内のスクロール: コンテンツが長いことに気づかず、重要な情報を読み飛ばす
3. カード型UI: 横スクロールのカルーセルで、スクロールバーがないと「これが全部」と誤解される

解決策1: スクロールバーを常に表示

.important-scroll-area {
  overflow: auto;
}

.important-scroll-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0.05); /* 薄い背景で存在を示す */
}

.important-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

解決策2: スクロールヒントを視覚的に追加 スクロールバーだけに頼らず、UIでスクロール可能であることを示す工夫も有効です。

/* 横スクロール可能な領域の右端にグラデーションを追加 */
.scroll-hint-container {
  position: relative;
  overflow-x: auto;
}

.scroll-hint-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.9));
  pointer-events: none; /* クリックを透過 */
}

/* スクロールバーも表示 */
.scroll-hint-container::-webkit-scrollbar {
  height: 10px;
}

.scroll-hint-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

HTML例:

<div class="scroll-hint-container">
  <table>
    <!-- 横に長いテーブル -->
  </table>
</div>

UI設計のベストプラクティス:

• 重要なコンテンツが隠れる可能性がある場合は、必ずスクロールバーを常に表示させる
• 横スクロールの場合は、右端にグラデーションや矢印アイコンを配置してヒントを出す
• テーブルの場合は「右にスクロールできます」といったテキスト注釈を添えるのも有効
• モバイルでは後述のとおりスクロールバーの強制表示が難しいため、スワイプジェスチャーのヒント（「← →」など）を表示する

これらの対策を組み合わせることで、「横スクロール 気づかない」問題を大幅に減らせます。

通信無制限なのに工事不要！【SoftbankAir】

iPhone(iOS)やAndroidスマホでスクロールバーは常時表示できる?

結論から言うと、iOSのSafariでは、CSSだけでネイティブスクロールバーを常に表示させることはほぼ不可能です。これはAppleのOS仕様による制限であり、開発者側でコントロールできる範囲は限られています。

iOS Safariにおけるスクロールバー表示の限界と仕様

iOSでは、スクロールバーはスクロール操作中のみ一瞬表示され、すぐに消える仕様になっています。これはユーザー体験を重視したAppleの設計思想です。

試してもほぼ無効なCSS:

/* これらはiOS Safariでは効果がない */
.container {
  overflow: auto;
}

.container::-webkit-scrollbar {
  width: 10px; /* iOS Safariでは無視される */
  -webkit-appearance: none;
}

.container::-webkit-scrollbar-thumb {
  background: #888; /* 表示されない */
}

なぜiOSで効かないのか:

• iOS SafariはWebKitベースですが、::-webkit-scrollbar 擬似要素に対する実装が意図的に制限されている
• Appleは「タッチUI」を前提としており、スクロールバーは「フィードバック」として一時表示されるべきという設計思想
• iOSのシステムレベルでネイティブスクロールバーの常時表示が許可されていない

技術的な限界:

/* iOS Safari 15以降で試せるが、常時表示は不可 */
.container {
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロールを有効化（非推奨プロパティ） */
}

• webkit-overflow-scrolling: touch は慣性スクロールを有効にするプロパティでしたが、iOS 13以降はデフォルトで有効になっており、またこのプロパティ自体が非推奨となっています。スクロールバーの常時表示には影響しません。

現実的な対応策: iOSでスクロール可能であることを示すには、CSSでの疑似スクロールバー実装や、UIヒントの追加が必要です。

/* iOS用：カスタムスクロールインジケーターを作成 */
.mobile-scroll-container {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 右端にスクロールヒントのグラデーションを表示 */
.mobile-scroll-container::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.1), transparent);
  pointer-events: none;
  float: right;
}

iframe や div 内スクロールでiOSにバーを出す裏技はあるか

一部の記事で「iframeを使えばスクロールバーが出る」という情報がありますが、現在のiOS Safari（iOS 13以降）ではこの方法も機能しません。

試されることが多い方法（ほぼ無効）:

<!-- これでもiOSではスクロールバーは常時表示されない -->
<iframe
  src="content.html"
  style="width: 100%; height: 400px; overflow: auto;">
</iframe>

/* div内スクロールでも同様に無効 */
.scrollable-div {
  width: 100%;
  height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

JavaScriptを使った疑似スクロールバーの実装: どうしてもiOSでスクロールバーを表示したい場合は、JavaScriptでカスタムスクロールバーを実装する必要があります。

<div class="custom-scroll-wrapper">
  <div class="custom-scroll-content">
    <!-- コンテンツ -->
  </div>
  <div class="custom-scrollbar">
    <div class="custom-scrollbar-thumb"></div>
  </div>
</div>

.custom-scroll-wrapper {
  position: relative;
  height: 400px;
}

.custom-scroll-content {
  height: 100%;
  overflow-y: auto;
  padding-right: 20px;
}

/* カスタムスクロールバー */
.custom-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.custom-scrollbar-thumb {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  cursor: pointer;
}

// スクロール位置に応じてthumbを移動させるJavaScript
const content = document.querySelector('.custom-scroll-content');
const thumb = document.querySelector('.custom-scrollbar-thumb');

content.addEventListener('scroll', () => {
  const scrollPercentage = content.scrollTop / (content.scrollHeight - content.clientHeight);
  const thumbHeight = (content.clientHeight / content.scrollHeight) * 100;
  thumb.style.height = thumbHeight + '%';
  thumb.style.top = (scrollPercentage * (100 - thumbHeight)) + '%';
});

ただし、この方法はコード量が増え、メンテナンスコストも高いため、本当に必要な場合のみ検討してください。

推奨される現実的な対応:

• スクロール可能であることを示すテキストラベル（「← スワイプ →」など）を追加
• 横スクロールの場合は、コンテンツの一部を意図的に見切らせて続きがあることを示唆
• ページネーションや「もっと見る」ボタンでスクロールを避ける設計に変更

Android Chromeでの表示挙動とOS依存の注意点

AndroidはiOSよりも柔軟で、Android ChromeではCSSによるスクロールバーのカスタマイズがある程度機能します。

Android Chromeでの挙動:

.container {
  overflow: auto;
}

/* Android Chromeでは一部有効 */
.container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

Androidでの実際の表示:

• Android Chrome 89以降: ::-webkit-scrollbar のスタイル指定が反映され、スクロールバーがカスタマイズされる
• ただし常時表示ではない: スタイルは反映されるが、スクロール時のみ表示され、数秒後に自動で隠れる
• Androidのバージョン依存: Android 8以前では挙動が不安定な場合がある

OS・ブラウザ別の対応表:

プラットフォーム	スクロールバーのカスタマイズ	常時表示
iOS Safari	✗ ほぼ不可	✗ 不可
iOS Chrome	✗ ほぼ不可（WebView制限）	✗ 不可
Android Chrome	○ 可能	△ スクロール時のみ
Android Firefox	△ 限定的	△ スクロール時のみ

モバイル対応のベストプラクティス:

/* デスクトップとモバイルで分岐 */
.responsive-scroll {
  overflow: auto;
}

/* デスクトップ用 */
@media (hover: hover) and (pointer: fine) {
  .responsive-scroll::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  .responsive-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
  }
}

/* モバイル用：スクロールヒントを追加 */
@media (hover: none) and (pointer: coarse) {
  .responsive-scroll {
    position: relative;
  }

  /* スクロール可能であることを示すアイコンを表示 */
  .responsive-scroll::before {
    content: '⟷';
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.3);
    z-index: 1;
    animation: fadeOut 2s forwards;
  }

  @keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
}

まとめ:

• iOS: CSSでのスクロールバー常時表示は技術的に不可能。UIヒントで対応
• Android: カスタマイズは可能だが、常時表示は難しい。スクロール時のみ表示される
• 推奨対応: モバイルではスクロールバーに頼らず、視覚的なヒントやレスポンシブデザインで解決する

あなたのサイトのURL、そろそろスリムにしませんか？

【場面別】Tableや特定divだけスクロールバーを出す実装パターン

実務では、ページ全体ではなく特定の要素だけにスクロールバーを表示させたいケースが多くあります。ここでは代表的な実装パターンをコピペですぐ使える形で紹介します。

横長の表(table)で横スクロールバーを常に見せるCSS

レスポンシブデザインで最も頻出するのが、横長のテーブルをスマホでも見やすくする横スクロール実装です。

基本パターン:

<div class="table-wrapper">
  <table class="data-table">
    <thead>
      <tr>
        <th>商品名</th>
        <th>価格</th>
        <th>在庫</th>
        <th>カテゴリ</th>
        <th>更新日</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>商品A</td>
        <td>¥1,000</td>
        <td>50</td>
        <td>雑貨</td>
        <td>2024-11-20</td>
        <td><button>編集</button></td>
      </tr>
      <!-- 繰り返し -->
    </tbody>
  </table>
</div>

.table-wrapper {
  width: 100%;
  overflow-x: auto; /* 横スクロールを有効化 */
  overflow-y: visible;

  /* Firefox用 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Webkit系ブラウザで横スクロールバーを常に表示 */
.table-wrapper::-webkit-scrollbar {
  height: 10px; /* 横スクロールバーの高さ */
}

.table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* テーブル本体のスタイル */
.data-table {
  width: 100%;
  min-width: 800px; /* テーブルの最小幅を指定してスクロールを発生させる */
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
  white-space: nowrap; /* テキストを折り返さない */
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

ポイント:

• overflow-x: auto で横方向のみスクロール可能に
• min-width をテーブルに指定することで、確実にスクロールが発生する
• white-space: nowrap でセル内のテキストが折り返されるのを防ぐ
• Macでも横スクロールバーが常に表示される

スクロールヒント付き改良版:

.table-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.table-wrapper::-webkit-scrollbar {
  height: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* 右端にグラデーションでスクロール可能を示唆 */
.table-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px; /* スクロールバーの高さ分を除外 */
  width: 40px;
  background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s;
}

/* スクロール最右端に到達したらグラデーションを消す（JavaScriptと併用） */
.table-wrapper.scrolled-end::after {
  opacity: 0;
}

モーダルやサイドバーなど特定の div 要素だけに適用する方法

モーダルウィンドウやサイドバーナビゲーションなど、特定のコンポーネント内でのみスクロールバーを表示させるパターンです。

モーダル内スクロールの実装:

<div class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <h2>利用規約</h2>
      <button class="close-btn">×</button>
    </div>
    <div class="modal-body">
      <!-- 長いコンテンツ -->
      <p>第1条...</p>
      <p>第2条...</p>
      <!-- 繰り返し -->
    </div>
    <div class="modal-footer">
      <button>同意する</button>
    </div>
  </div>
</div>

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* このdivだけスクロールバーを表示 */
.modal-body {
  padding: 20px;
  overflow-y: auto; /* 縦スクロールのみ */
  flex: 1; /* 残りのスペースを埋める */

  /* Firefox用 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Webkit系ブラウザでスクロールバーをカスタマイズ */
.modal-body::-webkit-scrollbar {
  width: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.modal-body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}

サイドバーナビゲーションの実装:

<nav class="sidebar">
  <div class="sidebar-header">
    <h3>メニュー</h3>
  </div>
  <ul class="sidebar-menu">
    <li><a href="#">ダッシュボード</a></li>
    <li><a href="#">ユーザー管理</a></li>
    <li><a href="#">商品管理</a></li>
    <!-- 項目が多い場合 -->
  </ul>
</nav>

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  background: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 20px;
  background: #1a252f;
  border-bottom: 1px solid #34495e;
}

/* メニュー部分だけスクロール */
.sidebar-menu {
  flex: 1;
  overflow-y: auto; /* 縦スクロールのみ */
  padding: 0;
  margin: 0;
  list-style: none;

  /* Firefox用 */
  scrollbar-width: thin;
  scrollbar-color: #34495e #2c3e50;
}

/* Webkit系ブラウザで細いスクロールバーを表示 */
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: #2c3e50;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: #34495e;
  border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: #4a5f7f;
}

.sidebar-menu li a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background 0.2s;
}

.sidebar-menu li a:hover {
  background: #34495e;
}

textarea の入力文字数に関わらずスクロールバーを維持する

フォームの textarea でも、常にスクロールバーを表示させたい場合があります。

基本実装:

<form>
  <label for="comment">コメント</label>
  <textarea
    id="comment"
    class="comment-textarea"
    placeholder="ご意見をお聞かせください"
    rows="8"></textarea>
</form>

.comment-textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical; /* 縦方向のリサイズのみ許可 */
  overflow-y: scroll; /* 常に縦スクロールバーを表示 */

  /* Firefox用 */
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* Webkit系ブラウザ用 */
.comment-textarea::-webkit-scrollbar {
  width: 10px;
}

.comment-textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.comment-textarea::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.comment-textarea::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* フォーカス時のスタイル */
.comment-textarea:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

ポイント:

• overflow-y: scroll を指定すると、テキストが少なくてもスクロールバー領域が確保される
• resize: vertical で横方向のリサイズを禁止し、レイアウト崩れを防ぐ
• Macでもスクロールバーが常に表示される

文字数カウンター付き改良版:

<div class="textarea-container">
  <textarea
    id="comment"
    class="comment-textarea"
    placeholder="ご意見をお聞かせください"
    maxlength="500"
    rows="8"></textarea>
  <div class="char-counter">
    <span id="current">0</span> / 500文字
  </div>
</div>

.textarea-container {
  position: relative;
  width: 100%;
}

.comment-textarea {
  width: 100%;
  padding: 12px 12px 40px 12px; /* 下部に文字数カウンター用のスペース */
  font-size: 14px;
  line-height: 1.6;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.comment-textarea::-webkit-scrollbar {
  width: 10px;
}

.comment-textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.comment-textarea::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

.char-counter {
  position: absolute;
  bottom: 12px;
  right: 20px;
  font-size: 12px;
  color: #666;
  pointer-events: none; /* クリックを透過 */
}

// 文字数カウンターの実装
const textarea = document.getElementById('comment');
const currentCount = document.getElementById('current');

textarea.addEventListener('input', () => {
  currentCount.textContent = textarea.value.length;
});

複数のtextareaに一括適用:

/* すべてのtextareaに適用 */
textarea {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

textarea::-webkit-scrollbar {
  width: 8px;
}

textarea::-webkit-scrollbar-track {
  background: #f1f1f1;
}

textarea::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* 特定のクラスだけに適用したい場合 */
textarea.scrollbar-always {
  overflow-y: scroll;
}

これらの実装パターンを使えば、テーブル、モーダル、サイドバー、textareaなど、あらゆる場面で特定の要素だけにスクロールバーを常に表示させることができます。

月額99円から。容量最大1TB！ブログ作成におすすめのWordPressテーマ「Cocoon」も簡単インストール

よくある質問(FAQ)

Amazon.co.jp

まとめ

CSSでスクロールバーを常に表示させる方法について、実務で使える実装パターンを解説してきました。特にMacでスクロールバーが消えてしまう問題は、多くの開発者が直面する課題です。この記事で紹介したコードを使えば、クロスブラウザ対応のスクロールバーを確実に実装できます。

実務では、テーブルの横スクロールやモーダル内のスクロールなど、特定の要素だけにスクロールバーを適用するケースが多いはずです。この記事で紹介したコードはコピペしてすぐ使えるようになっているので、プロジェクトの要件に合わせて活用してください。

「スクロールできることに気づかない」というユーザビリティの問題は、単にスクロールバーを表示するだけでなく、グラデーションやテキストヒントなどのUI設計でも解決できます。特にスマートフォンでは、スクロールバーに頼らない設計が重要になってきます。

CSSの進化とともにスクロールバーのカスタマイズ方法も変わっていきますが、本記事で紹介した::-webkit-scrollbarとscrollbar-widthの組み合わせは、現時点で最も安定した実装方法です。ブラウザのアップデートに伴う仕様変更には注意しながら、快適なユーザー体験を提供していきましょう。