[SalesForce] Why ‘slds-scrollable’ class is not compatible with s1 mobile

Lightning design system provide static resources such as CSS and HTML there isn't any JavaScript. So, why slds-scrollable class is not compatible with s1 mobile?

Does this mean that I can't use my custom scroll CSS in s1 mobile?

I could not find resource about incompatible CSS properties. So, I don't think that this should be the case.

Best Answer

There's already a known issue on this, you can probably click "This Issue Affects me" button if you're interested.

You can use newly added Lightning component in the Winter '17, ui:scrollerWrapper that enables native scrolling in Lightning Components Salesforce1 app as well as in Lightning Desktop.

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.

Please find the code below:

Component:-

<aura:component implements="force:appHostable, flexipage:availableForAllPageTypes">
    <div class="mainWrap">
        <ui:scrollerWrapper class="sWrapTest">
            <ul class="testDiv">        
               <li>In the Winter ’17 release, many of your favorite features 
                   are easier to use than ever before. 
               </li>
               <li>Lightning Experience has a brand new                      
                   navigation bar and lots of critical sales,
                   service, and analytics capabilities. 
               </li>
               <li>You’ve got more options for managing customer and partner
                   communities, running your business from your phone, 
                   and keeping your data and your users secure. 
               </li>
               <li>Not to mention plentiful new
                   customization and app development features, 
                   including custom Lightning apps.
               </li>                      
               <li>Other features require direct action by an administrator 
                   before users can benefit from the new functionality.
               </li>
               <li>If a key feature is also available in Salesforce1, 
                   our mobile app, we mention that in the feature description. 
               </li>
               <li>ui:scrollerWrapper
                   Creates a container that enables native scrolling in 
                   Salesforce1.
               </li>

            </ul>
        </ui:scrollerWrapper>
    </div>
</aura:component>

Style:-

.THIS .sWrapTest {
    height:100px;
    width:100px;
}

And, please find the following questions/issues regarding slds-scroll (since you've mentioned you didn't find any regarding that):-

  1. Default ScrollBar for Lightning Component no working in devices (iPad,iPhone)
  2. iPad/iPhone - Default Scrollbar issue #81
  3. Lightning Component Scroll Not Working
  4. Unable to add custom scroll due to “component/namespace encapsulation” when Locker Service is active

There are several other questions and answers regarding the custom scroll functionality and the work arounds. (I've only listed a few of them above)

Anyway, you can definitely use ui:scrollerWrapper to enable scroll functionality in Salesforce1 app.

I understand this does not provide a direct answer to your question, but hope atleast the workaround of using ui:scrollerWrapper helps.

Related Topic