基于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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JS画5角星方法介绍
Sep 17 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
Linux如何为某个操作添加别名
2013/03/01 面试题
运动会入场式解说词
2014/02/18 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
对照检查剖析材料
2014/09/30 职场文书
Django如何与Ajax交互
2021/04/29 Python
redis内存空间效率问题的深入探究
2021/05/17 Redis