滾動條定製器

自訂捲軸顏色和大小,然後複製 CSS.

免費線上捲軸CSS定製器

預設瀏覽器捲軸並不總是符合您的設計。 Dokall 的捲軸定製器可讓您在複製 CSS 之前選擇軌道和縮圖顏色、設定寬度並即時預覽結果。

產生的 CSS 包括 WebKit 和 Firefox 相容規則。將程式碼片段放入樣式表中,以獲得精美的品牌滾動體驗。

常見問題

此工具生成什麼 CSS?
Dokall 使用 WebKit 偽元素(::-webkit-scrollbar)以及標準的 scrollbar-width 和 scrollbar-color 屬性生成自定義滾動條樣式 CSS。將 CSS 複製到你的樣式表中即可。
自定義滾動條在所有瀏覽器中都能用嗎?
WebKit 滾動條樣式適用於 Chrome、Safari、Edge 和 Opera。Firefox 使用 scrollbar-width 和 scrollbar-color。為獲得跨瀏覽器支持,請同時包含兩套規則。本工具會自動生成兩者。
複製前可以預覽滾動條嗎?
可以。在實時預覽面板中調整顏色、寬度、圓角和軌道樣式。預覽滾動條會隨設定更改實時更新。
自定義滾動條會影響性能嗎?
不會。滾動條 CSS 純粹是視覺效果,沒有可測量的性能影響。瀏覽器會用你設定的顏色和尺寸渲染滾動條,而不是系統預設樣式。
可以在 React 或 Vue 應用中樣式化滾動條嗎?
可以。將生成的 CSS 複製到全局樣式表或 CSS module 中。對於組件作用域樣式,將滾動條規則應用到容器類。WebKit 偽元素不適用於 CSS-in-JS 內聯樣式——請使用樣式表。