Scrollbar Generator
webkit スクロールバーを視覚的に調整。サイズ・トラック・つまみ・ホバー・角丸を決めて CSS をコピー。
サイズ
色
形
ライブプレビュー（枠内をスクロール）
下の枠には縦横両方のスクロールバーがあり、生成される CSS と同じルールで装飾されています。
Scroll down for the vertical bar, scroll right for the horizontal one. Every paragraph here only exists to give the box something to scroll.
Line two of filler content. Line three of filler content. Line four of filler content.
Line five of filler content. Line six of filler content. Line seven of filler content.
Line eight of filler content. Line nine of filler content. Line ten of filler content.
Line eleven of filler content. Line twelve of filler content. Line thirteen of filler content.
Line fourteen of filler content. Line fifteen of filler content. Line sixteen of filler content.
生成された CSS
::-webkit-scrollbar 系は Chrome・Edge・Safari・Opera に対応します。Firefox は疑似要素での装飾に対応しないため、標準プロパティ scrollbar-width と scrollbar-color も出力します。
使い方
- 縦バーの幅と横バーの高さを設定します。どちらも同じ
::-webkit-scrollbarルールから出ます。 - トラックの色（溝）とつまみの色（掴む部分）を選び、さらにホバー時の色を別に指定して操作への反応を出します。
- つまみの角丸とトラックの角丸を整え、把手の周りにトラック色の余白が欲しい場合はつまみの枠線を追加します。
- Firefox 向けの標準プロパティ
scrollbar-widthをauto・thin・noneから選びます。 - プレビュー枠 内をスクロールすると両方のバーに反映されます。その後 CSS をコピーします。スニペットの既定クラスは
.scroll-areaなので、任意のクラス名に書き換えてください。
こんなときに
- サイドバーやチャット面板 —— 細長いテーマのバーで OS 既定の表示を避ける。
- コードやログビューア —— 広いトラックと高コントラストのつまみで、密集した文字でも位置が分かる。
- ダークテーマ —— トラックとつまみをそろえて暗くし、明るいシステムバーの眩しさを消す。
- 埋め込みウィジェット —— OS のスクロールバーが似合わない限定領域。
プライバシーについて
すべての値はローカルで適用され、CSS はページ内で組み立てられます。プレビューのスタイルはスコープ付きの style 要素に注入されるため、通信も送信も一切ありません。
FAQ
Q: なぜ CSS が 2 ブロックあるのですか？
A: Chrome・Edge・Safari・Opera は ::-webkit-scrollbar 疑似要素で装飾し、Firefox は標準プロパティ scrollbar-width と scrollbar-color にしか対応しません。両方を出力しているので、非対応環境でも妥当に退化します。
Q: スマホでホバー色が効きません。
A: タッチ界面にはホバーがないため、:hover ルールはポインタ装置でだけ発動します。タッチユーザーに見えるのは通常時のつまみの色です。
Q: スクロールバーを完全に隠せますか？
A: Firefox では scrollbar-width: none で隠せ、Chromium 系では疑似要素に display: none を指定します。ただし別のスクロール手がかりがある場合だけにしてください。位置表示を失います。
Q: プレビューはなぜ両方向に動くのですか？ A: プレビュー枠は意図的に内容より小さく作られているため、縦横両方のルールが描画され、角丸・枠線・色をそれぞれ確認できます。
データはこのデバイス内にとどまります
Scrollbar Generator は 100% ローカルで動作します。貼り付けたり、ドロップしたデータはすべてお使いのブラウザ内で処理され、送信されることはありません。当社のサーバーには何も保存されません——タブを閉じればすべて消えます。
入力された内容がサーバーへ送信・記録・解析利用されることはありません。初回読み込み後はネットワークを切断していてもこのページは動作します。