Components › Utilities

Scrollable

Make a containing box scrollable when scrolling is available.

BaseBasedev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-scrollable">Scrollable Content Here</div>

VerticalVerticaldev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-scrollable--y">Scrollable Content Here</div>

HorizontalHorizontaldev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-scrollable--x">Scrollable Content Here</div>

Component Overview

Use the scrollable utility when you need to provide scrolling within a section of a page. For example, when the content within an element exceeds either the width or height of the element, applying .slds-scrollable--y provides a vertical scrollbar, while .slds-scrollable--x adds a horizontal scrollbar.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-scrollable
Applied to:

surrounding div

Outcome:

Forces element to scroll horizontally and vertically when content exceeds element's width and height

Required:

Required

Comments:

--

.slds-scrollable--x
Applied to:

surrounding div

Outcome:

Forces element to scroll horizontally when content exceeds element's width

Required:

Required

Comments:

--

.slds-scrollable--y
Applied to:

surrounding div

Outcome:

Forces element to scroll vertically when content exceeds element's height

Required:

Required

Comments:

--