A ui:scrollerWrapper creates a container that enables native scrolling in Salesforce1. This component enables you to nest more than one scroller inside the container. Use the class attribute to define the height and width of the container. To enable scrolling, specify a height that's smaller than its content.
This example creates a scrollable area with a height of 300px.
<aura:component> <ui:scrollerWrapper class="scrollerSize"> <!--Scrollable content here --> </ui:scrollerWrapper> </aura:component> /** CSS **/ .THIS.scrollerSize { height: 300px; }
The Lightning Design System scrollable class isn't compatible with native scrolling on mobile devices. Use ui:scrollerWrapper if you want to enable scrolling in Salesforce1.
Usage ConsiderationsIn Google Chrome on mobile devices, nested ui:scrollerWrapper components are not scrollable when border-radius CSS property is set to a non-zero value. To enable scrolling in this case, set border-radius to a non-zero value on the outer ui:scrollerWrapper component.
Here is an example.
<aura:component> <ui:scrollerWrapper class="outerScroller"> <!-- Scrollable content here --> <ui:scrollerWrapper class="innerScroller"> <!-- Scrollable content here --> </ui:scrollerWrapper> <!-- Scrollable content here --> </ui:scrollerWrapper> </aura:component> /** CSS **/ .THIS.outerScroller { /* fix innerScroller not scrollable */ border-radius: 1px; } .THIS.innerScroller { /* make innerScroller rounded */ border-radius: 10px; }
This component supports the following method.
scrollTo(destination, xcoord, ycoord): Scrolls the content to a specified location.
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class applied to the outer element. This style is in addition to base classes output by the component. |