arca-ui

Scroll Area

Scroll area component with custom scrollbar styling for content containers

案例展示

滚动区域在实际场景中的使用示例

长列表滚动

Tags

tag-50
tag-49
tag-48
tag-47
tag-46
tag-45
tag-44
tag-43
tag-42
tag-41
tag-40
tag-39
tag-38
tag-37
tag-36
tag-35
tag-34
tag-33
tag-32
tag-31
tag-30
tag-29
tag-28
tag-27
tag-26
tag-25
tag-24
tag-23
tag-22
tag-21
tag-20
tag-19
tag-18
tag-17
tag-16
tag-15
tag-14
tag-13
tag-12
tag-11
tag-10
tag-9
tag-8
tag-7
tag-6
tag-5
tag-4
tag-3
tag-2
tag-1

水平滚动画廊

Image
Sketchbook Cover
Zine Artist
Image
Street Graffiti
Urban Creator
Image
Hand-drawn Poster
Poster Designer
Image
Ink Art
Ink Master
Image
Sticker Design
Sticker Maker
Image
Collage Work
Collage Artist

代码区滚动

// Zine Mark Theme Configuration
const theme = {
  colors: {
    cream: "#F4F1EA",
    charcoal: "#1C1C1C",
    ink: "#2D2D2D",
    orange: "#FF5A00",
  },
  fonts: {
    display: "Caveat",
    sans: "DM Sans",
    mono: "Geist Mono",
  },
  effects: {
    sketchBorder: "2px solid var(--border)",
    sketchShadow: "4px 4px 0 var(--border)",
  }
}

特殊形态

各种滚动条样式变体

始终显示滚动条 (Always Visible)

Always Visible Scrollbar

tag-50
tag-49
tag-48
tag-47
tag-46
tag-45
tag-44
tag-43
tag-42
tag-41
tag-40
tag-39
tag-38
tag-37
tag-36
tag-35
tag-34
tag-33
tag-32
tag-31

带轨道背景色 (Track Background)

With Track Background

tag-50
tag-49
tag-48
tag-47
tag-46
tag-45
tag-44
tag-43
tag-42
tag-41
tag-40
tag-39
tag-38
tag-37
tag-36
tag-35
tag-34
tag-33
tag-32
tag-31

宽滚动条 (Wide Scrollbar)

Wide Scrollbar

tag-50
tag-49
tag-48
tag-47
tag-46
tag-45
tag-44
tag-43
tag-42
tag-41
tag-40
tag-39
tag-38
tag-37
tag-36
tag-35
tag-34
tag-33
tag-32
tag-31

彩色滚动条 (Colored)

Accent Item 1
Accent Item 2
Accent Item 3
Accent Item 4
Accent Item 5
Accent Item 6
Accent Item 7
Accent Item 8
Accent Item 9
Accent Item 10
Accent Item 11
Accent Item 12
Accent Item 13
Accent Item 14
Accent Item 15
Success Item 1
Success Item 2
Success Item 3
Success Item 4
Success Item 5
Success Item 6
Success Item 7
Success Item 8
Success Item 9
Success Item 10
Success Item 11
Success Item 12
Success Item 13
Success Item 14
Success Item 15
Warning Item 1
Warning Item 2
Warning Item 3
Warning Item 4
Warning Item 5
Warning Item 6
Warning Item 7
Warning Item 8
Warning Item 9
Warning Item 10
Warning Item 11
Warning Item 12
Warning Item 13
Warning Item 14
Warning Item 15

方形滚动条 (Square)

Square Scrollbar

tag-50
tag-49
tag-48
tag-47
tag-46
tag-45
tag-44
tag-43
tag-42
tag-41
tag-40
tag-39
tag-38
tag-37
tag-36
tag-35
tag-34
tag-33
tag-32
tag-31

手绘风格滚动条 (Sketchy)

Sketchy Scrollbar

tag-50
tag-49
tag-48
tag-47
tag-46
tag-45
tag-44
tag-43
tag-42
tag-41
tag-40
tag-39
tag-38
tag-37
tag-36
tag-35
tag-34
tag-33
tag-32
tag-31

滚动方向

不同的滚动方向

Vertical (垂直滚动)

Vertical Item 1
Vertical Item 2
Vertical Item 3
Vertical Item 4
Vertical Item 5
Vertical Item 6
Vertical Item 7
Vertical Item 8
Vertical Item 9
Vertical Item 10
Vertical Item 11
Vertical Item 12
Vertical Item 13
Vertical Item 14
Vertical Item 15

Horizontal (水平滚动)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15

双向滚动

同时支持水平和垂直滚动

Both Directions Scroll Area - This is a very long title that extends beyond the container width

This is a long content line 1 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 2 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 3 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 4 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 5 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 6 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 7 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 8 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 9 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 10 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 11 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 12 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 13 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 14 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 15 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 16 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 17 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 18 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 19 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 20 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 21 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 22 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 23 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 24 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 25 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 26 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 27 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 28 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 29 that extends beyond the visible area to demonstrate horizontal scrolling
This is a long content line 30 that extends beyond the visible area to demonstrate horizontal scrolling