基于iScroll实现内容滚动效果

基于iScroll实现内容滚动效果

一、iScroll简介

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

官网地址：http://iscrolljs.com/

二、iScroll使用方法

1.iScroll使用结构

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

HTML:

...

...

注：1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。

       2、只有wrapper里的第一个子元素才可以滚动。

2、实例化iScroll

iScroll必须在调用之前实例化，实例化代码如下（在head标签中添加如下代码）：

三、滚动测试实例

HTML+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 shttp://olid #fff;

background-color:#fafafa;

font-size:14px;

}

#scroller li > a {

display:block;

}

四、运行效果

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。