滚动条在jquery移动应用程序中不可见

我正在使用phonegap的jquery移动应用程序。在应用程序中，我在页面中动态加载列表视图，其中的项目数量大于可在单个屏幕上显示的项目数量。在Android模拟器（Android 2.2）中查看时，listview显示正常，我可以轻扫或使用按钮向下滚动，但垂直滚动条不可见。我是否必须为垂直滚动条做特别的事情才能显示出来？滚动条在jquery移动应用程序中不可见

当我在浏览器（Firefox）中打开页面的静态版本时，滚动条显示，但在Android模拟器上的应用程序中加载的静态页面不显示滚动条（即，它似乎行为是一致的，并且与加载列表视图的动态性无关）。

我正在使用jquery 1.7.1，JQM 1.1.1，phonegap 2.0（所有最新版本）。

这里是页面代码：

<!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>

来源

2012-08-01 Samik R

最有可能的，这无关你的HTML，JS或任何东西。大多数移动浏览器默认隐藏内联滚动条。我自己经历了多个项目。因为在Safari等移动浏览器中使用滑动动作进行滚动，所以不会显示任何可见的滚动条。我想这是为了创造一种类似应用程序的体验。

相反，您需要为用户添加一些视觉队列，以便他们可以使用滑动或按钮来滑动该区域。移动浏览器故意不以任何方式，内联或其他方式呈现滚动条。

来源

2013-05-30 21:11:00 HBlackorby

我认为你是对的。我意识到这一点，并已停止寻找解决方案。你有没有关于你正在谈论的视觉线索的建议？请在答案中添加/编辑。谢谢。 – 2013-05-31 21:36:40

我认为我现在对默认行为感到满意。我在顶部添加了一个计数，以期望视图中可用项目的数量（对于那些注意到计数的人，这是）。 – 2013-10-16 05:55:14

使用iScroll使所有设备上完美的滚动（Android，iOS设备的Windows，黑莓等）

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

例子 - http://lab.cubiq.org/iscroll/examples/simple/

来源

2013-10-14 17:58:47 Saurabh

由克里斯·巴尔解决方案的工作完美对我来说：请看看这个：

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

用在我的应用程序是这样

// HTML

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

// JavaScript代码 - 添加滚动行为，在弹出的列表视图;有趣的是，在事件处理程序中添加没有代码的事件监听器就足以处理滚动值了

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

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

来源

2015-11-14 06:14:11 Karl

滚动条在jquery移动应用程序中不可见

回答

相关问题