Scroller Wrapper (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use native scrolling in the Salesforce app.

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.

Use ui:scrollerWrapper for vertical scrolling. This component does not support horizontal scrolling.

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>

1/** CSS **/
2.THIS.scrollerSize {
3  height: 300px;
4}

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 the Salesforce app.

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.

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>

1/** CSS **/
2.THIS.outerScroller {
3  /* fix innerScroller not scrollable */
4  border-radius: 1px;
5}
6.THIS.innerScroller {
7  /* make innerScroller rounded */
8  border-radius: 10px;
9}