ui:scrollerWrapper

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.

1<aura:component>
2    <ui:scrollerWrapper class="scrollerSize">
3        <!--Scrollable content here -->
4    </ui:scrollerWrapper>
5</aura:component>
6
7/** CSS **/
8.THIS.scrollerSize {
9    height: 300px;
10}

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.

In Google Chrome on mobile devices, nested ui:scrollerWrapper components are not scrollable when the 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.

1<aura:component>
2    <ui:scrollerWrapper class="outerScroller">
3        <!-- Scrollable content here -->
4        <ui:scrollerWrapper class="innerScroller">
5            <!-- Scrollable content here -->
6        </ui:scrollerWrapper>
7        <!-- Scrollable content here -->
8    </ui:scrollerWrapper>
9</aura:component>
10                        
11/** CSS **/
12.THIS.outerScroller {
13    /* fix scrolling in innerScroller */
14    border-radius: 1px;
15}
16.THIS.innerScroller {
17    /* make innerScroller rounded */
18    border-radius: 10px;
19}