LocalTools離線瀏覽器工具合集

分類: 開發工具

CSS 捲軸產生器

站方自行規劃沒找到想要的工具？

在本機產生自訂捲軸 CSS，並即時預覽

透過即時預覽設計自訂捲軸，並複製 scrollbar-color、scrollbar-width 以及 WebKit 捲軸樣式的 CSS。全部在瀏覽器裡產生。

預覽

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

捲動這個面板，看看你設定出來的捲軸。

輸出
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
  scrollbar-color: #8a9a8f #eceee9;
  scrollbar-width: thin;
}

/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.scroll-area::-webkit-scrollbar-track {
  background: #eceee9;
  border-radius: 8px;
}

.scroll-area::-webkit-scrollbar-thumb {
  background: #8a9a8f;
  border-radius: 8px;
}

.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #6f8076;
}

scrollbar-color 與 scrollbar-width 是標準屬性，也是 Firefox 與目前版本 Chrome 所採用的。::-webkit- 規則是為舊版 Chrome、Edge 和 Safari 保留的非標準前綴——兩個引擎的呈現不會完全一致。

預覽與產生的 CSS 都在你的瀏覽器裡完成。

本頁的所有處理都在瀏覽器中完成，不會上傳任何內容。

這個工具能做什麼

捲軸的樣式被分在兩套機制裡。CSS Scrollbars Styling 模組提供 `scrollbar-color` 與 `scrollbar-width`：兩個屬性、包含 Firefox 在內的廣泛支援，以及刻意節制的控制力。更早的 `::-webkit-scrollbar` 偽元素能做的多得多，但它是非標準前綴。這個產生器先輸出標準屬性，再輸出附帶說明的 WebKit 區塊，這樣既能涵蓋得廣，又不會假裝兩者是同一回事。它們的呈現不會一致；而捲軸是人們真正依賴的控制項，所以這裡的預覽是真的能捲動，而不是畫一個給你看。

使用方式

  1. 設定要美化的元素選擇器，然後選好滑塊、軌道與懸停時的顏色。
  2. 選擇 scrollbar-width，並設定 WebKit 的寬度與圓角。
  3. 捲動預覽確認效果，然後複製 CSS。

隱私說明

本工具完全在你的瀏覽器中執行。輸入的內容不會被上傳、儲存或分享，關閉分頁就隨之消失。

常見問題

自訂捲軸在所有瀏覽器裡都能用嗎？
不會完全一致。scrollbar-color 與 scrollbar-width 在 Firefox 以及目前版本的 Chrome、Edge 中有效；::-webkit- 規則涵蓋舊版 Chrome、Edge 與 Safari。工具會同時輸出兩者，但兩個引擎繪製捲軸的方式不同，沒有哪段 CSS 能讓它們完全一樣。
scrollbar-color 是什麼？
它是用一條宣告同時設定滑塊與軌道顏色的標準屬性——先寫滑塊，再寫軌道。它屬於 CSS Scrollbars Styling 模組，所以應當以它為主。
為什麼還要包含 WebKit 的 CSS？
因為標準屬性只開放了顏色與一個粗略的寬度，而且舊版 WebKit 與 Blink 並不支援它們。帶前綴的規則補上明確的尺寸與圓角，也照顧到那些瀏覽器。
我應該把捲軸完全隱藏嗎？
請謹慎。scrollbar-width: none 會拿掉一個看得見的提示——它告訴人們這塊區域可以捲動，也讓人能拖曳它。對不用滾輪或觸控板的人來說是損失。不妨改用一條細而對比清晰的捲軸。

回到全部工具