How to show scrollbars in onsen ui app list

Question

I'm using Onsen Ui to build a hybrid Phonegap app. There are lists on some pages with 100's of items. But, the scrollbars are not showing. Is there anyway to show native like scrollbars on the page?

Here is the code I'm using:

          <ons-row >
              <ons-col align="center" >
                <ons-list  class="scrollme" ng-scrollbar is-bar-shown="true">
                    <ons-list-item modifier="tappable" ng-repeat="hotel in hotels" ng-click="viewHotel(hotel);">
                        <div class="hotel-item">
                            <img preload-image ng-src="http://domain.com/{{hotel.thumbNailUrl}}" default-image="img/loader.gif" alt="Thumbnail" class="testimage">
                            <div class="gradient-overlay" style="text-align: center">
                                <div class="details">
                                    <h4>{{hotel.name}}</h4>
                                    <h4>{{hotel.rateCurrencyCode + " " + hotel.highRate}}
                                </div>
                            </div>
                        </div>
                    </ons-list-item>
                    <ons-button type="cta" should-spin="{{isFetching}}" 
                        ng-show="moreResultsAvailable" ng-click="loadMore()" class="loadMore">More Results</ons-button>
                </ons-list> 
              </ons-col>
            </ons-row>

Update

I have tried this ng-scrollbar , But it's not working. Scrollbar itself scrolls up when I scroll the list.

Answer 1

The onsenui.css file bundled with Onsen UI is hiding the scrollbar using this code:

::-webkit-scrollbar {
    display: none;
} 

To enable the scrollbars, you only need to un-do this by overriding the functionality, for example by adding this code to your index.html :

<style>
::-webkit-scrollbar {
    display: block !important;
    width: 5px;
    height: 0px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5); 
}
</style>

WARNING

While this approach seems to work in the particular flavour of app I put together (Android only). The fact the development team hid the scrollbar, and don't have a way to put it back on the screen yet (see other answer by @Andy), makes me think that there might be some unwanted side-effects to re-enabling the scrollbar at the CSS level, (Im thinking along the lines of problems with the lazy-repeat control or cross-platform differences in look and feel). In other words: use at your own risk.

Answer 2

Despite native apps, Onsen UI doesn't have a scrollbar element yet (version 1.3.1), but there are good chances that it will be implemented in the near future.

Source: I'm an Onsen UI development team member

Answer 3

In latest release of onsen-ui, now <ons-scroller> is used to scrolling purpose, so you can add it in your hmtl like bellow

<ons-scroller style="height: 200px; width: 100%">
<ons-row >
  <ons-col align="center" >
    <ons-list  class="scrollme" ng-scrollbar is-bar-shown="true">
        <ons-list-item modifier="tappable" ng-repeat="hotel in hotels" ng-click="viewHotel(hotel);">
            <div class="hotel-item">
                <img preload-image ng-src="http://domain.com/{{hotel.thumbNailUrl}}" default-image="img/loader.gif" alt="Thumbnail" class="testimage">
                <div class="gradient-overlay" style="text-align: center">
                    <div class="details">
                        <h4>{{hotel.name}}</h4>
                        <h4>{{hotel.rateCurrencyCode + " " + hotel.highRate}}
                    </div>
                </div>
            </div>
        </ons-list-item>
        <ons-button type="cta" should-spin="{{isFetching}}" 
            ng-show="moreResultsAvailable" ng-click="loadMore()" class="loadMore">More Results</ons-button>
    </ons-list> 
  </ons-col>
</ons-row>
</ons-scroller>