CSS Scrollbar Generator

CSS 捲軸產生器是一個免費的線上工具，可讓您自訂網站捲軸的設計，並立即產生必要的 CSS 程式碼。
只需操作滑桿和顏色選擇器即可調整捲軸和軌道的樣式，例如顏色、寬度和圓角，同時查看即時預覽。
產生的程式碼不僅與 Chrome、Safari 和 Edge 等 WebKit 瀏覽器相容，也透過 scrollbar-color 和 scrollbar-width 支援 Firefox。所有處理都在您的瀏覽器中完成，安全、快速且免費，無需安裝或註冊。

WebKit 前綴 (::-webkit-scrollbar)

一種非標準 CSS 偽元素，用於自訂由 WebKit/Blink 引擎驅動的瀏覽器（如 Chrome、Safari 和 Edge）中的捲軸。它可實現高度可自訂的設計。

Scrollbar Track (捲軸軌道)

捲軸的背景或凹槽。您可以使用 ::-webkit-scrollbar-track 設定其背景顏色或內陰影。

Scrollbar Thumb (捲軸滑塊)

捲軸中可拖曳的部分，用於指示捲動位置。使用 ::-webkit-scrollbar-thumb 調整其顏色和圓角。

scrollbar-color 和 scrollbar-width

Firefox 等不支援 WebKit 前綴的瀏覽器支援的 W3C 標準 CSS 屬性。它們允許您設定捲軸和軌道的顏色，並定義寬度（auto、thin 或 none）。

跨瀏覽器相容性

網站跨不同的網頁瀏覽器（Chrome、Firefox、Safari 等）一致地運行和顯示的能力。我們的工具產生在所有主要瀏覽器中皆能無縫運行的程式碼。

Q.產生的 CSS 可以在智慧型手機上運作嗎？

可以，它在基於 WebKit 的行動瀏覽器（如 iOS 的 Safari 和 Android 的 Chrome）上運作良好。但是，根據作業系統的規格，捲軸可能僅在捲動時才會顯示。

Q.我可以只將捲軸應用於特定元素（如 div）嗎？

可以。只需將產生的程式碼中的 .custom-scrollbar 替換為特定元素的 class 或 ID（例如 .my-container 或 #scroll-box）。

Q.它與 Firefox 瀏覽器相容嗎？

是的。此工具不僅會自動產生 WebKit 偽元素，還會產生適用於 Firefox 的 W3C 標準 scrollbar-color 和 scrollbar-width 屬性。

Q.使用此工具時，我的資料會儲存在伺服器上嗎？

不會。此工具完全在您的瀏覽器中使用 JavaScript 運行，因此您的設定和產生的程式碼永遠不會傳送到外部伺服器。

Q.如何完全隱藏捲軸？

要隱藏捲軸並保留捲動功能，您可以使用 WebKit 的 ::-webkit-scrollbar { display: none; } 和 Firefox 的 scrollbar-width: none;。