Question

在我的Android jQuery移动应用程序中，我在弹出窗口中有一个很长的列表视图，我使用了iscroll因为overflow：auto不能在android 2.3.6上工作，现在滚动在所有Android设备上运行正常iscroll，但问题是滚动条从弹出窗口的标题开始到弹出窗口的末尾（沿着弹出窗口高度）而不是列表视图高度“弹出窗口内容”，尽管我将iscroll应用于包含listview的div 。如何解决此问题并使滚动显示列表高度？请帮帮我

这是我使用jsfiddle

的iscroll.js

<head>
  <script type="text/javascript" src="js/iscroll.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-theme="b">Main</div>
<div data-role="content"> 
<a href="" data-rel="popup" id="Btn1" class="ui-btn  ui-corner-all" data-   inline="true">Show Popup</a>
</div>

<div data-role="popup" id="MyPOPUP" data-position-to="window" data-corners="false" data-  overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">

    <div style="text-align:center;float:center;padding-top:11px;">
    <font size="6px" color="white">Countries</font>

    </div>
</div>
<div id="scrollContent" class="content" data-role="content" style="background-color: white;">
    <ul data-role="listview" id="countrieslist" style="margin: 0 !important;">

    </ul>
    </div>
   </div>
  </div>
</body>

JS代码

$(document).on( 'pagecreate', '#index',function(){

   var  scrollObj;
// to make the popup  take the screen width ,height 
    var window_Width = $( window ).width();
    var window_Height = $(window).height();

 $('#MyPOPUP').css('width', window_Width-30 );
 $('#scrollContent').css('width', window_Width-30 );

     $('#MyPOPUP').css('height', window_Height-(window_Height/4) );

     $('#scrollContent').css('height', window_Height-(window_Height/4)-87 );


scrollObj = new iScroll('scrollContent', { vScrollbar: true,      hScrollbar:false,fixedScrollbar : true,momentum: true});


    for(var i=1;i<=50;i++) {
    $('#countrieslist').append('<li id="'+i+'"><a href="#" style="background:transparent  !important;"><font>Country' + i +'</font></a></li>');                
     }
    $('#countrieslist').listview('refresh');

    setTimeout(function () {
    scrollObj.refresh();
  }, 0);



     $('#Btn1').on('click', function(){ 
           $(this).attr('href','#MyPOPUP');    
     });

    $('#countrieslist').on('click','li', function() {

         selected_elem =  $(this).attr('id');
         console.log('you selected' + selected_elem);
        $('#MyPOPUP').popup('close');
     });
});

CSS

#scrollContent{

   padding: 0 !important;

}

滚动条未包含在jQuery mobile1.4.0中的可滚动内容区域中

0 个答案: