CSSスクロールバー スタイラー

スクロールバーの幅・色・角丸・ホバー効果をカスタマイズして、即コピーできるCSSを生成します。

コントロール

<div class="sb-control">
  <label>スクロールバー幅モード</label>
  <select class="sb-select" id="sb-width-mode" onchange="sbWidthModeChange()">
    <option value="auto">auto（デフォルト）</option>
    <option value="thin">thin（細め）</option>
    <option value="custom" selected>カスタム（px指定）</option>
  </select>
</div>

<div class="sb-control" id="sb-custom-width-wrap">
  <label>カスタム幅: <span class="sb-val" id="sb-width-val">10px</span></label>
  <input type="range" id="sb-width" min="2" max="32" value="10" oninput="sbUpdate()">
</div>

<div class="sb-control">
  <label>トラック色（背景）</label>
  <div class="sb-color-row">
    <input type="color" id="sb-track-color" value="#f1f5f9" oninput="sbSyncColor('sb-track-color','sb-track-color-hex')">
    <input type="text" id="sb-track-color-hex" value="#f1f5f9" oninput="sbSyncHex('sb-track-color','sb-track-color-hex')" maxlength="9">
  </div>
</div>

<div class="sb-control">
  <label>サム色（つまみ）</label>
  <div class="sb-color-row">
    <input type="color" id="sb-thumb-color" value="#94a3b8" oninput="sbSyncColor('sb-thumb-color','sb-thumb-color-hex')">
    <input type="text" id="sb-thumb-color-hex" value="#94a3b8" oninput="sbSyncHex('sb-thumb-color','sb-thumb-color-hex')" maxlength="9">
  </div>
</div>

<div class="sb-control">
  <label>サム ホバー色</label>
  <div class="sb-color-row">
    <input type="color" id="sb-thumb-hover-color" value="#6366f1" oninput="sbSyncColor('sb-thumb-hover-color','sb-thumb-hover-hex')">
    <input type="text" id="sb-thumb-hover-hex" value="#6366f1" oninput="sbSyncHex('sb-thumb-hover-color','sb-thumb-hover-hex')" maxlength="9">
  </div>
</div>

<div class="sb-control">
  <label>サム 角丸: <span class="sb-val" id="sb-thumb-radius-val">6px</span></label>
  <input type="range" id="sb-thumb-radius" min="0" max="50" value="6" oninput="sbUpdate()">
</div>

<div class="sb-control">
  <label>トラック 角丸: <span class="sb-val" id="sb-track-radius-val">0px</span></label>
  <input type="range" id="sb-track-radius" min="0" max="50" value="0" oninput="sbUpdate()">
</div>

ライブプレビュー

スクロールしてカスタムスクロールバーを確認できます。左のコントロールで設定を変更すると、リアルタイムでプレビューに反映されます。

幅・トラック色・サム色・ホバー色・角丸をそれぞれ細かく調整できます。プリセットを使えば素早くスタイルを適用可能です。

「非表示」プリセットを選ぶと、スクロール機能を保ちつつスクロールバーを見えなくできます。

生成したCSSは下のタブからコピーしてご利用ください。WebKit（Chrome・Safari・Edge）とFirefox両対応のCSSを出力します。

セレクター指定で特定の要素だけに適用することも可能です。グローバルに適用する場合は body のままにしてください。

現在の設定がプレビューに反映されています。

body のままでグローバル適用。
WebKit（Chrome/Safari/Edge）
Firefox
まとめてコピー
ブラウザ互換性
プロパティChromeFirefoxSafariEdge
::-webkit-scrollbar対応非対応対応対応
scrollbar-width121以降対応16以降121以降
scrollbar-color121以降対応16以降121以降
ホバー効果対応（WebKit）非対応対応（WebKit）対応（WebKit）
ヒント:「まとめてコピー」タブで全ブラウザ対応のCSSを一括取得できます。Firefoxはホバー色の個別指定に非対応です。
Web制作の経費管理もかんたんに
freee会計なら、デザインツール・サーバー費用の経費精算もクラウドで一元管理。
freeeを無料で試す →
ボタンをスタイル → CSSボタンジェネレーター
アニメーションをカスタマイズ → CSSアニメーションジェネレーター
CSS変数 → CSS変数ジェネレーター
確定申告・会計をもっとラクに？ freee会計
なら、フリーランスの経費管理もクラウドで簡単。まずは無料で試してみましょう。