Scrollable
Scrollable
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Make a containing box scrollable when scrolling is available.
Scrollable: AutoRequires ui:scrollerWrapper
Preview
About Scrollable
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.
Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-scrollable |
|---|---|
| Summary | Forces element to scroll horizontally and vertically when content exceeds element's width and height |
| Restrict | * |
| Modifier | True |
| Selector | .slds-scrollable_none |
|---|---|
| Summary | Forces overflow items to not scroll within element's width and height |
| Restrict | * |
| Modifier | True |
| Selector | .slds-scrollable_y |
|---|---|
| Summary | Forces element to scroll vertically when content exceeds element's height |
| Restrict | * |
| Modifier | True |
| Selector | .slds-scrollable_x |
|---|---|
| Summary | Forces element to scroll horizontally when content exceeds element's width |
| Restrict | * |
| Modifier | True |