ライブプレビューでカスタムCSSスクロールバースタイルを作成します。幅、色、トラック、サム、ホバー効果を調整できます。クロスブラウザ対応のWebKitとFirefoxスクロールバーCSSを即座に生成します。
このエリアをスクロールして、カスタムスクロールバーの動作を確認してください。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.
/* Generated CSS will appear here */CSSスクロールバージェネレーターは、ウェブサイト用のカスタムスクロールバースタイルを作成できる無料のオンラインツールです。デフォルトでは、ブラウザはデザインに合わないプレーンなスクロールバーを表示します。このツールでは、スクロールバーの幅、トラックの色、サムの色、ホバー効果、角丸半径をカスタマイズし、クロスブラウザ対応のCSSコードをコピーできます。WebKitブラウザ（Chrome、Safari、Edge）は::-webkit-scrollbar疑似要素を使用し、Firefoxはscrollbar-* CSSプロパティを使用します。このジェネレーターは、最大限の互換性のために両方を出力します。
WebKitベースのブラウザ（Chrome、Safari、Edge）は::-webkit-scrollbar疑似要素をサポートします。Firefoxはscrollbar-widthとscrollbar-colorプロパティをサポートします。Internet Explorerはカスタムスクロールバーのスタイル設定をサポートしません。このジェネレーターは、WebKitとFirefoxの両方に対応したCSSを提供し、最大限の互換性を実現します。
モバイルブラウザは通常、タッチデバイスではスクロール中にのみスクロールバーが表示されるため、カスタムスクロールバーのスタイル設定をサポートしません。カスタムスクロールバーCSSは主にデスクトップブラウザに影響します。
はい、HEX、RGB、RGBA、HSL、名前付きカラーを含む、任意の有効なCSSカラーを使用できます。このツールには、トラック、サム、ホバー状態、コーナーに対するカラーピッカーが含まれており、外観を完全に制御できます。
はい、CSSスクロールバージェネレーターは完全に無料です。すべての処理はブラウザ内で行われます — 登録不要、広告なし、データ収集なし。