基于iScroll实现内容滚动效果


Posted in Javascript onMarch 21, 2018

一、iScroll简介

iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25,目前最新版本是iScroll5,大家可以去官网下载。
官网地址:http://iscrolljs.com/

二、iScroll使用方法

1.iScroll使用结构

最优化使用iScroll的结构一般如下所示:

HTML:

<div id="wrapper">
  <div id="scroller">
   <ul>
    <li></li>
    ...
   </ul>
   <ul>
    <li></li>
    ...
   </ul>
  </div>
 </div>

注:1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
       2、只有wrapper里的第一个子元素才可以滚动。

2、实例化iScroll

iScroll必须在调用之前实例化,实例化代码如下(在head标签中添加如下代码):

<script src="iscroll.js"></script>
 <script>
  var myscroll;//myscroll是全局变量,可以任意地方调用
  function loaded(){
   myscroll = new iScroll("wrapper");
   }
  window.addEventListener("DOMContentLoaded",loaded,false);
 </script>

三、滚动测试实例

HTML+CSS:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="iscroll-4.2.5fix.js"></script><!--引入js包-->
<!--实例化iScroll-->
<script type="text/javascript">
 var myscroll;
 function loaded(){
 myscroll = new iScroll("wrapper");
 }
 window.addEventListener("DOMContentLoaded",loaded,false);
</script>
<!--CSS样式设置-->
#wrapper {
 position:absolute; z-index:1;
 top:45px; bottom:48px; left:0;
 width:100%;
 background:#aaa;
 overflow:auto;
}

#scroller {
 position:relative;
/* -webkit-touch-callout:none;*/
 -webkit-tap-highlight-color:rgba(0,0,0,0);

 float:left;
 width:100%;
 padding:0;
}

#scroller ul {
 position:relative;
 list-style:none;
 padding:0;
 margin:0;
 width:100%;
 text-align:left;
}

#scroller li {
 padding:0 10px;
 height:40px;
 line-height:40px;
 border-bottom:1px solid #ccc;
 border-top:1px solid #fff;
 background-color:#fafafa;
 font-size:14px;
}

#scroller li > a {
 display:block;
}
</style>
<title>滚动测试</title>
</head>
<body>
<div id="wrapper">
 <div id="scroller">
  <ul id="thelist">
   <li>Pretty row 1</li>
   <li id="aaa">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>
   <li>Pretty row 17</li>
   <li>Pretty row 18</li>
  </ul>
 </div>
</div>
</body>
</html>

四、运行效果

基于iScroll实现内容滚动效果

博主刚开始学习,局部内容滚动这只是iScroll最基本的功能,接下来博主会尝试拉动刷新等功能。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
使用js显示当前时间示例
Mar 02 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 Javascript
JS中的回调函数实例浅析
Mar 21 #Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 #Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 #Javascript
JS实现遍历不规则多维数组的方法
Mar 21 #Javascript
vue项目关闭eslint校验
Mar 21 #Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 #Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 #Javascript
You might like
超级实用的7个PHP代码片段分享
2012/01/05 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
canvas时钟效果
2017/02/16 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
详解Web使用webpack构建前端项目
2017/09/23 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
python导入pandas具体步骤方法
2019/06/23 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python多进程使用函数封装实例
2020/05/02 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
校园活动宣传方案
2014/03/28 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
企业法人任命书
2015/09/21 职场文书