2

I would like to display scrollbar always in iOS devices when implementing scroll functionality using <ui:scrollerWrapper> element in Salesforce1 app which was recently fixed in Winter '17 release.

Currently the scroll appears only when user tries to scroll the div. But sometimes, since the scroll won't be displayed initially, the user won't be knowing that even scroll functionality even exists.

Can someone help me with a workaround to display scroll always in various mobile devices?

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>

CSS

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

Scroll bars are not displayed until a user scrolls on mobile devices. As frustrating as this is, there's not much you can do about it, because the OS provides the actual scrolling functionality. As far as I'm aware, SLDS (the Salesforce Lightning Design System) doesn't specify a scrollbar behavior, either. Non-standard practices might include providing a visual cue, such as an arrow, in the lower-right corner to indicate that scrolling is available, or perhaps a semi-transparent overlay near the bottom that seems to be popular on many sites these days.

  • Thank you @sfdcfox for the answer. But the sf team still haven't fixed lightningdesignsystem.com/components/utilities/scrollable this right in S1? That's why I had to use ui:scrollerWrapper as mentioned in the developer guide. If the SLDS scroll was working in S1 app, then as given in the SLDS website, I guess we would be able to display the scroll always. – SE_User Oct 27 '16 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.