html5在android搭建滚动条

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量140 收藏
点赞数
分类专栏： android html5 文章标签： javascript webkit jquery html ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huihuiyang218/article/details/84210249
版权
最近的项目中出现类似IOS滚动条的效果。我们知道在html 中本来是有一个overflow的属性是可以设置出现滚动条的。但是在phonegap中就失去了效果！这个解决起来是要很多的东西，但是实现还是很简单的，只需要两个文件及少许的代码。
[size=large][color=red]先是：html .................................................[/color][/size] 

<!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>

[color=red]2.css文件。。。。。。。。。。。。。。。。。。。。。。。。。。。[/color][size=large][/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;
}

[color=red] 3.随便做点js.................................[/color][size=large][/size]
$(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。
huihuiyang218
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5手机端实现 上下滚动
07-16
HTML5服务端 手机端实现上下滚动。
安卓内嵌H5，显示div滚动条css样式
luojingonline的博客
07-30 706
&::-webkit-scrollbar{ width:5px; height:13px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } ...
加入滚动条的html代码
热门推荐
KarlDoenitz的专栏
08-22 1万+
div {margin-top:100px;margin-left:100px;width:400px;height:200px;border:solid 1px;overflow-x:hidden;overflow-y:scroll;} body {margin:0} 1. re: 请教：如何在子页面关闭时把焦点设置到父页面的服务器控件上？ 评论内容较长,点击标题查看
APP中内嵌H5滚动条问题
Baby_加油_的博客
10-23 5303
前端H5有时候会为APP单独写一个单页面，就遇到的问题，做一下总结~ 首先，会直接做一个长篇的HTML，你会遇到看到，下拉的过程中会有默认的滚动条出现，而且用各种方法去不掉，如图，中间部分是APP中插内嵌的H5，右边会显示滚动条 &lt;body&gt; &lt;!--用户协议--&gt; &lt;div class="about_agreement"&gt; ...... &lt...
手机html滚动原理,手机滚动-如何实现惯性滚动
weixin_32556315的博客
06-04 641
手机惯性滚动时应该怎么计算速度，以及之后速度怎么递减等问题因为要做一个手机端的滚动插件，所以想模拟出手机原生的惯性滚动，就是手指快速滑动后，手机页面在手指抬起来之后，依然会滚动一段距离的效果。现在我尝试了两种方法1、在手指start与end之间时间少于300ms时，根据手指移动距离得出需要继续滚动的长度，在end之后通过transition与top实现动画效果2、在手指end之后通过手指的移动距离...
疯狂Android讲义源码
08-26
　1.2 搭建Android开发环境 5 　1.2.1 下载和安装Android SDK 5 　1.2.2 安装Eclipse和ADT插件 7 　1.3 Android常用开发工具的用法 10 　1.3.1 创建、删除和浏览AVD 10 　1.3.2 使用Android模拟器 　（Emulator） 14...
html5手机端手动滑动
09-09
html5手机端手动滑动
html5原创手机触摸全屏滚动效果
05-29
html5原创手机触摸全屏滚动效果，、兼容安卓、苹果等常用设备，来源：http://www.jq-school.com/Detail.aspx?id=484
移动端 html5 锁死不让滚动条滚动
06-13
重写ontouchstart ontouchmove 事件.达到锁死滚动条不让滚的目的 直接调用里面的方法就行.有注释
android滚动条显示,Android标题栏随着滑动显示隐藏
weixin_29358723的博客
05-25 620
这次实现标题栏随着上滑下滑显示隐藏实现这个效果需要，Support Design库中的CoordinatorLayout和AppBarLayout进行配合才行。dependencies {...implementation 'com.android.support:design:27.1.1' //必须添加implementation 'com.android.support:cardview-v...
h5 android 滚动条卡顿,h5怎么解决移动端滑动卡顿的问题
weixin_30100299的博客
05-26 1308
解决方法如下：(相关视频推荐：html视频教程)1、ios端的-webkit-overflow-scrolling属性可控制页面滚动效果，设置如下实现惯性滚动和弹性效果：body{-webkit-overflow-scrolling: touch;overflow-scrolling: touch;overflow-y: scroll;}2、由于盒子设置了高度100%引起的：html,body{h...
滑动导航栏+滚动页面
10-05 359
创业指南：不该违反的9条军规 http://news.csdn.net/a/20120516/2805610.html Google调整Android战略：整合生态系统 削弱运营商控制 http://mobile.csdn.net/a/20120516/2805613.html android-整体UI设计-（滑动导航栏+滚动页面） ...
android2.3平台上web页面(html5中使用frame)不能滑动的解决方法
u011297329的专栏
12-30 813
问题描述 web页面采用html5技术实现，在系统登录页面中使用frameset、frame来嵌套另一个页面，结果当android2.3移动设备访问该页面时触摸屏不能上下滑动页面。 解决方法 1.首先将该页面简单化，去掉frame相关标签，结果可以滑动页面，但是根据系统设计需要，frame相关标签不能去掉； 2.折腾很久未果，最后发现代码里有viewport的注释痕迹，于是
【Android】ScrollView实现滚动条效果
少年白马
04-07 7358
有的时候需要的控件太多或者图片太长溢出屏幕了，这时候就需要ScrollView实现滑动效果 官方提示：不要在ScrollView中添加RecyclerView或者是ListView布局，这样会引起不好的体验，可能会有滑动冲突的问题，ScrollView的子布局只能有一个，其他的button都是LinearLayout的子元素，同时ScrollView只支持水平或者竖直滑动 为了实现简单的滚动效果，我们直接在代码最后加上一个button让它超出屏幕外，运行程序，我们就可以看到模拟器的右边出现了滚动条，只要我们
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 824
注释很详细，直接上代码……
android studio滚动条
09-02
在Android Studio中，你可以通过在XML文件中添加滚动条来实现滚动效果。滚动条有水平和垂直两种方向。如果想要在滚动条下添加多个控件，需要在这些控件的外层增加一个布局，如线性布局。水平方向的滚动条可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值