創建自定義 CSS 滾動條

使用我們直觀的生成器設計美觀、現代的滾動條，與您的網站風格相匹配。無需編碼技能！

開始定製 查看範例

控制面板

8px
0px

Preview

滾動條預覽內容

這是自定義滾動條的演示區域。調整左側的設置以查看即時更改。

Feature 1

適用於現代網站和應用程式的完全可自定義滾動條。

Feature 2

跨瀏覽器支援，為不同的瀏覽器提供自動前綴。

長文本內容示例： 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.

更多文本內容： Curabitur pretium tincidunt lacus.Nulla gravida orci a odio.Nullam varius， turpis et commodo pharetra， est eros bibendum elit， nec luctus magna felis sollicitudin mauris.Integer in mauris eu nibh euismod gravida.Duis ac tellus et risus vulputate vehicula.Donec lobortis risus a elit.Etiam tempor.Ut ullamcorper， ligula eu tempor congue， eros est euismod turpis， id tincidunt sapien risus a quam.Maecenas fermentum consequat mi. Donec fermentum.Pellentesque malesuada nulla a mi.Duis sapien sem， aliquet nec， commodo eget， consequat quis， neque.Aliquam faucibus， elit ut dictum aliquet， felis nisl adipiscing sapien， sed malesuada diam lacus eget erat.Cras mollis scelerisque nunc.Nullam arcu.Aliquam consequat.Curabitur augue lorem， dapibus quis， laoreet et， pretium ac， nisi.Aenean magna nisl， mollis quis， molestie eu， feugiat in， orci.In hac habitasse platea dictumst.

End of text： Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium， totam rem aperiam， eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit， sed quia consequuntur magni dolores eos qui rationé voluptatem sequi nesciunt.Neque porro quisquam est， qui dolorem ipsum quia dolor sit amet， consectetur， adipiści velit， sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Ut enim ad minima veniam， quis nostrum exercitationem ullam corporis suscipit laboriosam， nisi ut aliquid ex ea commodi consequatur？Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur， vel illum qui dolorem eum fugiat quo voluptas nulla pariatur？

生成的 CSS 代碼

複製到剪貼簿！

強大的功能

完全可定製

調整滾動條的各個方面，包括寬度、顏色、半徑和邊框，以完美匹配您網站的設計。

跨瀏覽器支援

生成適用於所有現代瀏覽器（包括 Chrome、Firefox、Safari 和 Edge）的 CSS 代碼。

即用型預設

使用我們精選的滾動條預設集合從專業設計開始，以便快速實施。

即時預覽

使用我們的互動式預覽面板，準確查看您進行調整時滾動條的外觀。

獲取格式良好、最少的 CSS 代碼，這些代碼可以整合到您的專案中，而不會產生任何膨脹。

回應式設計

創建完美適應不同螢幕大小和設備的滾動條，以獲得一致的用戶體驗。

如何使用

1

自定義 Scrollbar

使用控制面板調整滾動條的寬度、顏色、半徑和其他屬性，直到它與您的設計願景相匹配。

2

複製生成的 CSS

對預覽感到滿意後，按兩下 「Copy CSS」 按鈕將生成的代碼複製到剪貼板。

3

添加到您的專案

將 CSS 代碼粘貼到項目的樣式表中或內聯使用它。將類應用於任何元素以查看自定義滾動條的作。

Scrollbar 示例

帶有圓角的現代藍色滾動條示例。非常適合公司網站和應用程式。

此滾動條使用淺藍色軌道和深藍色拇指，該拇指在懸停時更改顏色。

向下滾動以查看完整效果。拇指的半徑為 5px，可實現平滑的圓角邊緣。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

現代藍

帶有圓潤邊緣的時尚藍色滾動條

具有最小樣式的微妙深色滾動條的示例。非常適合內容繁重的網站。

此滾動條使用非常淺的灰色軌道和中等灰色的拇指，該縮略圖在懸停時變暗。

向下滾動以查看完整效果。對於柔和的邊緣，拇指的半徑略小為 3px。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

微妙的黑暗

內容網站的極簡主義深色滾動條

具有粗體樣式的充滿活力的綠色滾動條示例。非常適合環保或與健康相關的網站。

此滾動條使用淺綠色軌道和鮮豔的綠色拇指，該拇指在懸停時變暗。

向下滾動以查看完整效果。拇指的半徑為 6px，邊緣明顯圓潤。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

充滿活力的綠色

用於生態主題網站的粗體綠色滾動條

具有現代設計的時尚紫色滾動條示例。非常適合創意或作品集網站。

此滾動條使用淺紫色軌道和深紫色拇指，懸停時會變暗。

向下滾動以查看完整效果。拇指的半徑為 4px，可實現乾淨的圓角邊緣。

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

時尚紫色

用於創意項目的現代紫色滾動條

常見問題解答

Related Tools

觸控筆到 CSS 轉換器

將您的 SCSS 代碼轉換為 CSS。快速、簡單、安全。

CSS3 過渡生成器

平滑的不透明度過渡

Less 到 CSS 轉換器

將 Less 代碼轉換為 CSS。快速、簡單、安全。

Pantone 到 CMYK

將 Pantone 顏色轉換為 CMYK 值以進行印刷設計

面積單位轉換器

精確輕鬆地在不同面積單位之間轉換

十六進位到二進位

輕鬆將十六進位代碼轉換為二進位