html5在android搭建滚动条
最近的项目中出现类似IOS滚动条的效果。我们知道在html 中本来是有一个overflow的属性是可以设置出现滚动条的。但是在phonegap中就失去了效果！这个解决起来是要很多的东西，但是实现还是很简单的，只需要两个文件及少许的代码。
先是：html .................................................
<!DOCTYPE HTML>
<html 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 name="soso" method="post" >
<input type="text" style="color: rgb(204, 204, 204);" value="搜索你感兴趣的.." name="sosokey"></input>
<input id="sbkey" type="submit" style="cursor:pointer;" value=" " name="sbkey">
</form>
</div>
</div>
<div id="wrapper">
<div id = "scroller">
<div id="liangshiganhuo">
<div class = "link_photo"></div>
<div id="rouqinzhipin">
<div class = "link_photo"></div>
<div id="ruzhipin">
<div class = "link_photo"></div>
<div id="xiuxianshipin">
<div class = "link_photo"></div>
<div id="zibupin">
<div class = "link_photo"></div>
<div id ="yinliao">
<div class = "link_photo"></div>
<div id="jiushuilei">
<div class = "link_photo"></div>
<div id="shengxianshipin">
<div class = "link_photo"></div>
<div id="yingyouershiping">
<div class = "link_photo"></div>
<div id="menu1">
<div id = "menu2">
<div id = "meun3">
<div id = "menu4">
<div 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。
