基于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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
微信小程序实现星星评分效果
Nov 01 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
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python实现划词翻译
2020/04/23 Python
python多线程用法实例详解
2015/01/15 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python with (as)语句实例详解
2020/02/04 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
自荐信怎么写呢?
2013/12/09 职场文书
《匆匆》教学反思
2014/02/22 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
心得体会格式及范文
2016/01/25 职场文书
Java spring定时任务详解
2021/10/05 Java/Android