Geek Answers Handbook

Scroll bar not showing in jquery mobile app

I am working on a jquery mobile application that uses phonegap. In the application, I dynamically load the listview onto a page with more items than shown on one screen. When viewed in an Android emulator (Android 2.2), the list view is clearly visible, and I can scroll or use the buttons to scroll down, but the vertical scroll bar is not visible. Do I have to do something special for the vertical scrollbar?

When I open the static version of the page in the browser (Firefox), a scrollbar appears, but the same static page loaded into the application on the Android emulator does not show the scrollbar (i.e. it seems that the behavior is consistent and has nothing to do with the dynamic nature of the loading list).

I am using jquery 1.7.1, JQM 1.1.1, phonegap 2.0 (all the latest 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>
+4
source share
3 answers

Most likely, this has nothing to do with your HTML, JS, or anything else. Most mobile browsers by default hide the built-in scrollbars. I went through this with several projects. Since in mobile browsers such as Safari, you scroll them with the swipe movement, they do not show visible scroll bars. I would suggest that this is an attempt to create an application similar to experience.

Instead, you will need to add some visual queue to the user so that they can slide around this area using the scroll or buttons. The mobile browser does not intentionally provide scrollbars anywhere, inline or otherwise.

+3
source

use iScroll for 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
source

Chris Barr solution works great for me: Please take 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 - adds scroll behavior to listview in popup window; Interestingly, it was enough to add an event listener without code in the event handler to control the scroll value

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

More articles:


All Articles