ui:scrollerWrapper

Creates a container that enables native scrolling in the Salesforce app.

A ui:scrollerWrapper creates a container that enables native scrolling in the Salesforce app. 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>
        <!--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 Salesforce for Android, iOS, and mobile web.

Usage Considerations

In 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>
        <!-- Scrollable content here -->
        <ui:scrollerWrapper>
            <!-- 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;
}
Methods

This component supports the following method.

scrollTo(destination, xcoord, ycoord): Scrolls the content to a specified location.

  • destination (String): The target location. Valid values: custom, top, bottom, left, and right. For custom destination, xcoord and ycoord are used to determine the target location.
  • xcoord (Integer): X coordinate for custom destination. The default is 0.
  • ycoord (Integer): Y coordinate for custom destination. The default is 0.

Attributes

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.