滾動條在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移動應用程序中不可見

回答

相關問題