幅・角丸・枠線と 3 つの色を設定し、実際にスクロールできるプレビューで確認してから生成された CSS をコピーできます。
ブラウザ内でローカルに実行つまみを使用して、生成された幅、境界線、ホバー時の処理を確認します。
02エクスポートには、標準化された Firefox のプロパティと WebKit の疑似要素が含まれます。
03生成されたクラスを、インターフェイス内の任意のオーバーフローコンテナに適用します。
04スタイルは外観を変更しますが、キーボードとホイールでのスクロールはネイティブのままです。
同じ 6 つの値から 2 種類のルールを書き出します。Firefox 向けの標準プロパティ scrollbar-width / scrollbar-color と、Chromium・Safari 向けの ::-webkit-scrollbar 系（トラック・サム・ホバー・幅/高さ）です。ステージ見出しの表示は現在の幅と対応するキーワード（例：12px · auto）を示します。
プレビューは描画ではなく実際のオーバーフロー領域です。検証では高さ 300px の窓に 528px の内容が入っており、スクロールバーはブラウザー自身が描画します。コード欄と同じ CSS を #cs-scroll-preview というセレクターで注入しており、コピー内容と違うのはクラス名だけです。
ブロックは 5 つのルールで構成されます。基本クラス（scrollbar-color: <サム> <トラック>）、::-webkit-scrollbar（幅と高さ）、::-webkit-scrollbar-track（トラック色と角丸）、::-webkit-scrollbar-thumb（サム色・トラック色で描いた枠線・同じ角丸）、そして ::-webkit-scrollbar-thumb:hover（ホバー色）です。
色は 6 桁の 16 進数（小文字）、数値は整数ピクセルで出力されます。サムの枠線がトラック色なのは意図的で、サムを内側に縮めてトラックが細い線として周囲に見えるようにしています。そのためトラック色を変えると枠線の色も変わります。
4 つのプリセットはスタイルシートではなく固定の値セットです。Forest 12/10/3（#2e8b62・#1f6f4b・#e7f0eb）、Slate 11/3/2（#526575・#354754・#dfe5e8）、Sunset 14/12/3（#d87352・#a94f3a・#f7e4dc）、最小限 7/7/0（#87958e・#53635b・#f3f6f4）。順序は幅・角丸・枠線、次にサム・ホバー・トラックです。
「カスタム」は 5 つ目のプリセットではなく状態です。一覧では非表示のまま、欄を編集すると選択中のラベルとして現れ、選んでも画面の値は上書きされません。リセットは Forest の既定値に戻し、ステータス行を消します。
幅は 4〜28px、角丸は 0〜30px、サムの枠線は 0〜6px に制限し、確定時に整数へ丸めます。Chromium と Safari は ::-webkit-scrollbar 疑似要素でピクセル幅と色を反映し、Firefox は scrollbar-width と scrollbar-color のみを解釈します。公開前に両方のエンジンで確認してください（プレビューは今使っているブラウザーの表示です）。
処理はすべてページ内で完結します。読み込み後にプリセットの切り替え・幅の入力・色の選択・コピー・リセットを行った en / fr / ja の検証で、ネットワークリクエストは 1 件も発生せず、コンソールエラーもありませんでした。レイアウトは幅 320px〜1360px で横スクロールなしに収まります。