4

I am working on a jquery mobile app which uses phonegap. In the app, I am dynamically loading a listview in a page with number of items greater than what can be shown on a single screen. When viewing in android emulator (Android 2.2), the listview is shown fine, and I can swipe or use the buttons to scroll down, but the vertical scrollbar is not visible. Do I have to do anything special for the vertical scrollbar to show up?

When I open a static version of the page in a browser (Firefox), the scrollbar does show up, but the same static page loaded in the app on the android emulator doesn't show the scrollbar (i.e., it seems that the behavior is consistent and has nothing to do with the dynamic nature of loading the listview).

I am using jquery 1.7.1, JQM 1.1.1, phonegap 2.0 (all most recent versions).

Here is the page code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Conference List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="common/jquery.mobile-1.1.1.min.css" />
    <script type="text/javascript" charset="utf-8" src="common/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/cordova-2.0.0.js"></script>
</head>
<body>
<div id="conf-list" data-role="page">

    <div data-role="header">
        <a href="#" class="ui-btn-left" data-icon="delete" onclick="exit()">Exit</a>
        <a href="#" class="ui-btn-right" data-icon="refresh" onclick="downloadConfList(confFilePath)">Refresh</a>
        <span class="ui-title" />        
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role='listview' data-inset='true'>
                <li data-role='list-divider'>Available Conferences:</li>
                <li data-icon='false'>
                        <a href='javascript:openConference(2010041801)'>
                                <h4>Conference A1 2010</h4>
                                From 2010-04-18 to 2010-04-20<br />
                                Orlando, FL, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2010110701)'>
                                <h4>Conference A2 2010</h4>
                                From 2010-11-07 to 2010-11-10<br />
                                Austin, TX, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2011111301)'>
                                <h4>Conference A3 2011</h4>
                                From 2011-11-13 to 2011-11-16<br />
                                Charlotte, NC, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012041501)'>
                                <h4>Conference A4 2012</h4>
                                From 2012-04-15 to 2012-04-17<br />
                                Huntington Beach, CA, USA
                        </a>
                </li>

                <li data-icon='false'>
                        <a href='javascript:openConference(2012101401)'>
                                <h4>Conference A5 2012</h4>
                                From 2012-10-14 to 2012-10-17<br />
                                Phoenix, AZ, USA
                        </a>
                </li>

        </ul>
    </div><!-- /content -->

</div><!-- /page -->
</body>
</html>

3 Answers 3

3

Most likely, this has nothing to do with your HTML, JS or anything. Most mobile browsers by default hide inline scrollbars. I went through this myself with multiple projects. Because in mobile browsers like Safari you scroll using a swipe motion, they don't show any visible scrollbars. I would guess this is an effort to createa app-like experience.

Instead, you'll need to include some visual queue to the user that they can slide that area with swiping or buttons. The mobile browser is purposfully not rendering scrollbars anywhere, inline or otherwise.

2
  • I think you are right. I realized that, and have stopped looking for a solution for this. Do you have suggestions for visual cues you are talking about? Please add/edit in your answer. Thanks.
    – Samik R
    May 31, 2013 at 21:36
  • I think I am reasonably happy with the default behavior at the moment. I added a count at the top to give an expectation of the number of items available in the view (for those who notice the count, that is).
    – Samik R
    Oct 16, 2013 at 5:55
0

use iScroll to make perfect scrolling on all devices (Android,iOS,Windows, Blackberry etc..)

URL- http://cubiq.org/iscroll-4

example - http://lab.cubiq.org/iscroll/examples/simple/

0
0

The solution by Chris Barr works perfectly for me: Please have a look at this:

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

Used in my application like this

// HTML

<ul data-role="listview" id="my-select-view" data-filter="true" style="max-height: 250px; overflow: scroll">
</ul>

// Javascript Code - add scroll behaviour to the listview in the popup; Interestingly it was enough to add the event listener without the code in the eventhandler for manipulating the scroll value

$('#my-select-view').on("touchstart", function(event) {                            scrollStartPos=this.scrollTop+event.touches[0].pageY;
                        });

$('#my-select-view').on("touchmove", function (event) {
                        });

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.