[SalesForce] How to constantly display scrollbar in iOS using element

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;
}

Best Answer

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.

Related Topic