Scrollbar 滾動條

用於容器內的內容滾動,取代瀏覽器原生滾動條,讓各作業系統/瀏覽器上的滾動條外觀一致。使用 Element Plus 的 el-scrollbar,本頁定義 AccuHit 產品中的使用準則。

設計準則

• 只用於「區塊內」滾動:側欄選單、卡片內清單、下拉面板、對話框內容區 —— 整個頁面的滾動交給瀏覽器原生,不要把整頁包進 el-scrollbar
• 內容高度固定可預期時用 height;內容會增減(可能不滿)時用 max-height,內容不足時容器自動縮小
• 滾動區域要有視覺邊界(邊框或底色),讓使用者知道「這一塊可以滾」;懸空的滾動區使用者找不到
• 許多 Element Plus 元件內建了滾動(Select 下拉、Table 的 height、Dialog 內容區)—— 直接用內建的,不要再包一層
• 橫向滾動用於卡片列、標籤列等;表格的橫向滾動用 el-table 自帶的,不要自己包

基本用法

固定高度 height,超出的內容出現滾動條:

loading

最大高度

用 max-height:內容少時容器縮小、超過才出現滾動條。點按鈕試試:

loading

橫向滾動

內容寬度超過容器就會出現橫向滾動條(內層要允許超寬,例如 width: max-content):

loading

Do / Don't

✅ Do	❌ Don't
側欄、卡片清單、面板內用 el-scrollbar	整個頁面包進 el-scrollbar
內容會增減時用 max-height	內容常常不滿還鎖死 height 留一大塊空白
滾動區有邊框/底色標出範圍	懸空的滾動區,使用者不知道能滾
表格滾動用 el-table 內建	表格外面再包一層 el-scrollbar

給工程師

完整 API(props/events/slots)見 Element Plus Scrollbar 文件。 常用:height、max-height、always(滾動條常駐,預設是滾動時才出現)、@scroll 事件、setScrollTop() 方法。 本站規範優先於 EP 文件中的視覺建議。