本来想着scroll用 iscroll-4 的工具

但是jq.mobil 有冲突。后来研究发现

jq.mobi具有一个插件

jq.scroller.js

可以很好的实现滚动效果。

具体下载地址可以去jq.mobil 网站下载。

使用方法：

1.引入js文件

2.写入脚本

 

var myScroller;
$.ui.ready(function(){
    myScroller=$("#viewport").scroller();//此处id就是为需要滚动的区域id   

});

3.html

  <div id="wrapper">   
             <div id="viewport">

             <li>Pretty row 1</li>
            <li>Pretty row 2</li>
            <li>Pretty row 3</li>
            <li>Pretty row 4</li>
            <li>Pretty row 5</li>
            <li>Pretty row 6</li>
            <li>Pretty row 7</li>
            <li>Pretty row 8</li>
            <li>Pretty row 9</li>
            <li>Pretty row 10</li>
            <li>Pretty row 11</li>
            <li>Pretty row 12</li>
            <li>Pretty row 13</li>
            <li>Pretty row 14</li>
            <li>Pretty row 15</li>
            <li>Pretty row 16</li>
             </div>
        </div>

4.css:

#wrapper {
            margin-top:10px;
            height:80%;//此处可以指定固定高度来实现小区域内的滚动或者省略
            left:-9999px;
            width:99.5%;
            border:1px solid #333;
        }
         #viewport {     
        background:#FC9;
         padding:0 10px;
         }

转载请注明：夜阑小雨 » phonegap-jq.mobil页面内部scroll