CSSスクロールバースタイルジェネレーター
幅、トラック、つまみ、角の設定から、ブラウザ間で互換性のあるカスタムスクロールバーCSS(WebKitの::-webkit-scrollbar-*ルールとFirefoxのscrollbar-color/scrollbar-width)を生成し、実際にスクロールできるライブプレビューを表示します。
入力
幅
色
垂直スクロールバーと水平スクロールバーが交差する場所にのみ表示されます。
形状とマークアップ
トラックから枠線ギャップを付けてつまみを配置し、浮遊しているように見えるようにします。
このクラスをoverflow を持つ任意の要素に適用します — すべてのセレクターがその下にスコープされます。
出力
Your scrollbar will appear here.
実際に生成されたCSS、Shadow DOMに分離されています — ボックスをスクロールして表示してください。
クラスが適用されたスクロール可能なボックス — 高さ/コンテンツを独自のものに置き換えてください。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-scrollbar-style-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"widthPreset": "thin",
"customWidth": "12",
"trackColor": "#f1f5f9",
"thumbColor": "#94a3b8",
"thumbHoverColor": "#64748b",
"cornerColor": "#f1f5f9",
"trackRadius": "8",
"thumbRadius": "8",
"floatingThumb": "true",
"className": "io-scrollbar"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-scrollbar-style-generator` tool (CSS Scrollbar Style Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-scrollbar-style-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSスクロールバースタイルジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
このツールが行うこと
ブラウザはスクロールバーのスタイリング方法について意見が分かれています。Chrome、Safari、Edgeは::-webkit-scrollbar-*疑似要素のセットを使用します。一方、Firefoxはそれらすべてを無視して、代わりにscrollbar-widthとscrollbar-colorの2つの短縮形プロパティを読みます。このツールはいくつかのコントロール — 幅、トラックカラー、つまみカラー、ホバーカラー、コーナーカラー、コーナー半径 — から両方を一度に生成し、実際にスクロールできるライブプレビューを表示するため、コピーする前に結果を確認できます。
使用方法
- スクロールバーの幅 — 細い、自動（ブラウザのデフォルト幅を再着色）、カスタムピクセル値、または非表示を選択します。
- トラック、つまみ、つまみホバー、コーナーの色を設定します。
- トラック半径とつまみ半径を調整し、フローティングつまみをトグルしてトラックから外れたつまみを設定します。
- クラス名を指定し、ライブプレビューをスクロールして確認します。
- CSSをスタイルシートにコピーし、
overflow: autoまたはoverflow: scrollを持つ任意の要素にクラス名を適用します。
CSSはWebKitブロックとFirefoxブロックの両方が必要な理由は何ですか？
スクロールバーのスタイリング用の単一の標準APIはまだ存在しません。WebKitベースのブラウザはスクロールバーを5つのスタイル可能な疑似要素（::-webkit-scrollbar、-track、-thumb、-thumb:hover、-corner）として公開しますが、Firefoxはより新しく、はるかにシンプルなscrollbar-width/scrollbar-colorプロパティを実装しており、WebKitの疑似要素をまったくサポートしていません。片方だけを出荷すると、ブラウザエンジン全体がスタイルなしのデフォルトスクロールバーのままになるため、生成されたCSSは常に両方を含みます。
Firefoxが私のカスタムピクセル幅を使用できないのはなぜですか？
scrollbar-widthは3つのキーワード — auto、thin、none — のみを受け付けます。正確なピクセル値用のプロパティはありません。カスタム幅を選択すると、Firefoxはthinにフォールバックします。これは利用可能な最も近いオプションです。
これはページの他の場所のスクロールバーに影響しますか？
いいえ。すべてのルールは選択したクラス名の下にスコープされているため、そのクラスを適用した要素のみが影響を受けます。ページの残りはネイティブスクロールバーを保ちます。
スクロールバーを完全に非表示にしたい場合はどうすればよいですか？
非表示幅プリセットを選択します。これはFirefoxの場合はscrollbar-width: noneを、WebKitスクロールバー疑似要素の場合はdisplay: noneを設定するため、要素はスクロール可能なままです（マウスホイール、タッチ、またはスクリプト経由で）が、スクロールバートラックやつまみをまったく表示しません。
まったく異なるスクロール効果が必要な場合はどうすればよいですか？
スクロールバーの外観ではなくスクロール駆動アニメーションについては、CSSスクロール駆動アニメーションジェネレーターを参照してください。スクロール可能なボックス自体のコーナーをスクロールバーではなく丸くしたい場合は、CSSボーダー半径ジェネレーターを使用してください。