# ScrollPanel

**Path:** Components/Layout

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

ScrollPanel

 RbScrollPanel creates a controlled scrolling region for horizontally or vertically overflowing content.
 It replaces the visible browser scrollbar with drag, wheel, and optional button navigation.

 Use it for card rails, compact galleries, fixed-height feeds, or touch-friendly strips where you want a cleaner shell.

 When To Use
 Use horizontal mode for chips, widgets, cards, or timeline-style lanes.

 Use vertical mode when content height exceeds a fixed viewport.

 Use TrapMouseWheel only when the panel should consume wheel movement instead of the page.

 Horizontal Cards

 A common dashboard-style rail where each card keeps a fixed width and the panel handles overflow.

 Show code

 Workspace 1

 Live 

 Scroll horizontally through cards without exposing the browser scrollbar.

 Updated 2m ago 
 Open 

 Workspace 2

 Live 

 Scroll horizontally through cards without exposing the browser scrollbar.

 Updated 2m ago 
 Open 

 Workspace 3

 Live 

 Scroll horizontally through cards without exposing the browser scrollbar.

 Updated 2m ago 
 Open 

 Workspace 4

 Live 

 Scroll horizontally through cards without exposing the browser scrollbar.

 Updated 2m ago 
 Open 

 Workspace 5

 Live 

 Scroll horizontally through cards without exposing the browser scrollbar.

 Updated 2m ago 
 Open 

 Workspace 6

 Live 

 Scroll horizontally through cards without exposing the browser scrollbar.

 Updated 2m ago 
 Open 

 Buttons And Progress

 Compare compact shell modes and decide whether users need explicit navigation buttons or only the progress indicator.

 Show code

 Buttons + Progress

 Step Item 1

 Step Item 2

 Step Item 3

 Step Item 4

 Step Item 5

 Step Item 6

 Progress Only

 Compact Item 1

 Compact Item 2

 Compact Item 3

 Compact Item 4

 Compact Item 5

 Compact Item 6

 Buttons Only

 Focused Nav 1

 Focused Nav 2

 Focused Nav 3

 Focused Nav 4

 Focused Nav 5

 Focused Nav 6

 Vertical Feed

 A fixed-height vertical viewport for activity feeds, release notes, or queue-style content.

 Show code

 Feed Item 1

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 2

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 3

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 4

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 5

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 6

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 7

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Feed Item 8

 Vertical mode is useful when the viewport height is constrained but the content list should still feel tactile.

 Readonly Disabled

 Use these states when the viewport should stay visible but interaction must be reduced or blocked.

 Show code

 Readonly

 Visible Item 1

 Visible Item 2

 Visible Item 3

 Visible Item 4

 Visible Item 5

 Disabled

 Disabled Item 1

 Disabled Item 2

 Disabled Item 3

 Disabled Item 4

 Disabled Item 5

 Trap Wheel On

 Enable wheel trapping when the panel should keep consuming scroll instead of letting the surrounding page continue.

 Show code

 Move the mouse wheel over this panel. Because TrapMouseWheel is enabled here, the panel keeps consuming wheel input instead of letting the page continue scrolling.

 Page content before the panel

 Wheel trapping item 1

 Wheel trapping item 2

 Wheel trapping item 3

 Wheel trapping item 4

 Wheel trapping item 5

 Wheel trapping item 6

 Wheel trapping item 7

 Page content after the panel

 API

 RbScrollPanel

 A custom scroll viewport for overflowing content with drag, wheel, and optional navigation buttons.

 Vertical

 Switches the panel from horizontal scrolling to vertical scrolling.

 Parameters

 bool Vertical = false

 Set true for top-to-bottom content stacks.

 ShowProgress

 Displays a thin progress indicator that reflects the current scroll position.

 Parameters

 bool ShowProgress = true

 Hide it when the shell should stay visually minimal.

 ShowButtons

 Shows previous and next navigation buttons.

 Parameters

 bool ShowButtons = true

 Helpful when drag interaction is not obvious enough.

 TrapMouseWheel

 Controls whether wheel movement is consumed by the panel instead of bubbling to the surrounding page.

 Parameters

 bool TrapMouseWheel = false

 Set true only when page scrolling should not continue naturally.

 Border / Rounded

 Applies standard Rubic shell styling helpers to the panel container.

 Parameters

 bool Border = false

 Adds a border around the panel shell.

 bool Rounded = false

 Adds rounded corners.

 ChildContent

 The overflowing content rendered inside the scroll area.

 Parameters

 RenderFragment ChildContent 

 Provide horizontally wide or vertically tall content here.

 ✕

 Contents