html5在android筹建滚动条
日期：2014-05-17 浏览次数：20685 次
html5在android搭建滚动条
最近的项目中出现类似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">
最近的项目中出现类似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">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
