最近的项目中出现类似IOS滚动条的效果。我们知道在html 中本来是有一个overflow的属性是可以设置出现滚动条的。但是在phonegap中就失去了效果！这个解决起来是要很多的东西，但是实现还是很简单的，只需要两个文件及少许的代码。
先是：html .................................................
<!DOCTYPE HTML>
<html class="ui_mobile">
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>好食物</title>
<link rel="stylesheet" href="css/haoshiwu.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/iscroll_jquery_wrapper.js"></script>
<script type="text/javascript" src="js/haoshiwu.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
/* var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper');
}, 100);
}
window.addEventListener('load', loaded, false); */
</script>
</head>
<body>
<div class="head_div">
<div class = "logo_div"> </div>
<div class="sogo_div">
<form action="" name="soso" method="post" >
<input class="sogo_div_input" type="text" style="color: rgb(204, 204, 204);" value="搜索你感兴趣的.." name="sosokey"></input>
<input id="sbkey" class="sbkey" type="submit" style="cursor:pointer;" value=" " name="sbkey">
</form>
</div>
</div>
<div id="wrapper">
<div class="list_div" id = "scroller">
<div class="sun_list_first" id="liangshiganhuo">
<div class = "link_photo"></div>
<div class="link_to_second">粮油干货</div>
<div class = "link_count">44件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id="rouqinzhipin">
<div class = "link_photo"></div>
<div class="link_to_second">肉禽制品</div>
<div class = "link_count">36件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id="ruzhipin">
<div class = "link_photo"></div>
<div class="link_to_second">乳制品</div>
<div class = "link_count">20件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id="xiuxianshipin">
<div class = "link_photo"></div>
<div class="link_to_second">休闲食品</div>
<div class = "link_count">31件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id="zibupin">
<div class = "link_photo"></div>
<div class="link_to_second">滋补品</div>
<div class = "link_count">19件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id ="yinliao">
<div class = "link_photo"></div>
<div class="link_to_second">饮料</div>
<div class = "link_count">39件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id="jiushuilei">
<div class = "link_photo"></div>
<div class="link_to_second">酒水类</div>
<div class = "link_count">26件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_middle" id="shengxianshipin">
<div class = "link_photo"></div>
<div class="link_to_second">生鲜食品</div>
<div class = "link_count">49件</div>
<div class="link_go"></div>
</div>
<div class="sun_list_last" id="yingyouershiping">
<div class = "link_photo"></div>
<div class="link_to_second">婴幼儿食品</div>
<div class = "link_count">50件</div>
<div class="link_go"></div>
</div>
</div>
</div>
<div class="menu_div">
<div class="menu1" id="menu1">
<div class="meun1_pic1"></div>
<div class="meun1_text1">食品</div>
</div>
<div class="menu2" id = "menu2">
<div class="meun2_pic1"></div>
<div class="meun1_text1">话题</div>
</div>
<div class="menu2" id = "meun3">
<div class="meun3_pic1"></div>
<div class="meun1_text1">厂家</div>
</div>
<div class="menu2" id = "menu4">
<div class="meun4_pic1"></div>
<div class="meun1_text1">咨询</div>
</div>
</div>
</body>
</html>
2.css文件。。。。。。。。。。。。。。。。。。。。。。。。。。。[/size]
/* .ui-mobile, .ui-mobile .ui-page {
min-height: 300px;
} */
body {
background:#ECEEF2 none repeat scroll 0 0;
color:#666;
font-family:Helvetica;
font-size:72%;
margin:0;
line-height:1.5em;
}
.head_div{
width:100%;
height:60px;
line-height: 60px;
background:#90A2B8;
border-bottom: 2px solid #7E858A;
}
.logo_div{
background: url("../img/haoshiwu_head-111.png") no-repeat scroll 0 0;
float:left;
margin-right: 10px;
width:120px;
margin-top: 0px;
}
.sogo_div{
float:left;
right:20px;
height: 52px;
line-height: 52px;
margin-top: 10px;
}
.sogo_div_input{
background: url("../img/ry_sosos.png") no-repeat scroll 0 0 transparent;
border: medium none;
float: left;
height: 38px;
line-height: 38px;
width: 100px;
margin-right: 0px;
margin: 5px 0 0 15px;
padding-left: 5px;
}
.sbkey{
margin-left:0px;
background: url("../img/ry_soso-111.png") no-repeat scroll 0 0 transparent;
float: left;
padding: 0;
width: 50px;
border: medium none;
height: 38px;
line-height: 38px;
margin-top: 5px;
}
#wrapper {
height: 333px; /* Of course you need to specify the object height */
position: relative;
/* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
z-index: 1;
/* it seems that recent webkit is less picky and works anyway. */
width: 100%;
background: #ECEEF2;
overflow: hidden;
margin-bottom: 0px;
}
#scroller {
-webkit-touch-callout:none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0;
/* -webkit-box-shadow:0 0 8px #555; /** Don't use box shadows, they slow down drastically CSS animations */
}
.list_div{
background: none no-repeat scroll 0 0 #ffffff;
border: 1px solid #000000;
border-radius: 10px 10px 10px 10px;
float: left;
margin: 20px;
width: 88%;
}
.list_div .sun_list_first{
height:65px;
border-bottom: 1px solid #C5CCD4;
width:100%;
}
.list_div .sun_list_middle{
height:65px;
border-bottom: 1px solid #C5CCD4;
border-top:1px solid #C5CCD4;
}
.list_div .sun_list_last{
height:65px;
border-top:1px solid #C5CCD4;
}
.link_to_second{
height:60px;
width:80px;
float:left;
line-height: 60px;
font-size: 16px;
font-stretch:narrower;
color:#000000;
}
.link_photo{
background: url("../img/food.png") no-repeat scroll 0 0 transparent;
height:50px;
width:86px;
border: medium none;
margin-left:0px;
margin-right:10px;
margin-top: 5px;
border-radius: 6px 6px 6px 6px;
float:left;
}
.link_count{
font-size: 16px;
color:#222222;
height:60px;
width:40px;
line-height: 60px;
text-align: center;
float:left;
}
.link_go{
background: url("../img/right.png") no-repeat scroll 0 0 transparent;
display: block;
height: 30px;
width:28px;
float:left;
position:absolute;
right:1px;
margin-top: 15px;
}
.menu_div{
bottom:0px;
width:100%;
height:60px;
line-height:60px;
float:left;
font-size: 16px;
text-align: center;
background-color: #222222;
}
.menu_div .menu1{
width:25%;
height:60px;line-height:60px;
background: #98989C no-repeat scroll 0 0 ;
float: left;
color: #ffffff;
border-radius: 10px 10px 10px 10px;
}
.meun1_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb1.png") no-repeat scroll 0 0 transparent;
}
.meun2_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb2.png") no-repeat scroll 0 0 transparent;
}
.meun3_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb3.png") no-repeat scroll 0 0 transparent;
}
.meun4_pic1{
height:29px;
width:34px;
line-height: 29px;
margin-top:5px;
margin-left:25px;
background: url("../img/tb4.png") no-repeat scroll 0 0 transparent;
}
.meun1_text1{
height:20px;
width:34px;
line-height: 20px;
margin-left:25px;
}
.menu_div .menu2{
background: #222222 no-repeat scroll 0 0 ;
width:25%;
height: 60px;line-height:60px;
float: left;
color: #98989C;
border-radius: 10px 10px 10px 10px;
}
3.随便做点js.................................[size=large]
$(document).ready(function(){
/**
* 菜单的滑动
*/
$(".menu1,.menu2,.menu3,.menu4").hover
(function(){
$(".menu1").css("background","#222222");
$(this).css("background","#98989C");
$(this).css("color","#ffffff");
},
function(){
$(this).css("background","#222222");
});
/**
* 列表的点击跳转
*/
$("#liangshiganhuo").click(function(){
window.location.href="shipin.html";
});
$("#rouqinzhipin").click(function(){
window.location.href="shipin.html";
});
$("#ruzhipin").click(function(){
window.location.href="shipin.html";
});
$("#xiuxianshipin").click(function(){
window.location.href="shipin.html";
});
$("#zibupin").click(function(){
window.location.href="shipin.html";
});
$("#yinliao").click(function(){
window.location.href="shipin.html";
});
$("#jiushuilei").click(function(){
window.location.href="shipin.html";
});
$("#shengxianshipin").click(function(){
window.location.href="shipin.html";
});
$("#yingyouershiping").click(function(){
window.location.href="shipin.html";
});
/**
*
*/
});
[color=red]把下面的 包塞到你的js 文件中那个就行了，如果对于搭建环境不熟悉的，我有篇文章也介绍了，希望对你有帮助。
ok，然后直接在Activity中使用super.loadUrl("file:///android_asset/www/haoshiwu.html");就完成了！
详细内容可以查看官网：http://cubiq.org/iscroll-4/comment-page-5#comments。