Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › What is use of ui:scrollerWrapper in Salesforce?

Tagged: , , , , , ,

  • Anjali

    Member
    September 27, 2018 at 1:53 PM

    Hi Shradha,

    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 class="scrollerSize">
    <!--Scrollable content here -->
    </ui:scrollerWrapper>
    </aura:component>

    /** CSS **/
    .THIS.scrollerSize {
    height: 300px;
    }

  • [adinserter block='9']

  • Parul

    Member
    September 28, 2018 at 7:20 PM

    Adding some points:

    If you’re developing for Lightning Experience, this badge indicates a component that can be supported on mobile through the use of the ui:scrollerWrapper component. More information about ui:scrollerWrapper can be found in the Lightning Developer Guide. The Lightning Design System scrollable class does not bypass the “Pull to Refresh” scrolling behavior on mobile devices, so using ui:scrollerWrapper allows you to set up scrollable content areas on mobile devices that don’t interfere with other behavior.

     

    Thanks

  • Parul

    Member
    September 28, 2018 at 7:21 PM

    Here’s an example of how you might use ui:scrollerWrapper to make a tab’s content scrollable using the lightning namespace:

    <aura:component>

    <lightning:tabset>

    <lightning:tab label="Item One">

    <ui:scrollerWrapper> <div> Tab Content Goes Here </div>

    </ui:scrollerWrapper>

    </lightning:tab>

    <lightning:tab label="Item Two"> Sample Content Two </lightning:tab>

    </lightning:tabset>

    </aura:component>

     

    Thanks

  • shariq

    Member
    September 28, 2018 at 8:40 PM

    <aura:component>
    <ui:scrollerWrapper class=”scrollerSize”>
    <!–Scrollable content here –>
    </ui:scrollerWrapper>
    </aura:component>

    /** CSS **/
    .THIS.scrollerSize {
    height: 300px;
    }

Log In to reply.

Popular Salesforce Blogs