基于iScroll实现内容滚动效果

一、iScroll简介

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

二、iScroll使用方法

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

HTML:

rush:xhtml;">
  • ...
    • ...

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

    2、实例化iScroll

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

    rush:js;">

    三、滚动测试实例

    HTML+CSS:

    <div class="jb51code">
    <pre class="brush:xhtml;">

    <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"> #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);

    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;
    }

    滚动测试
    Pretty row 1
  • Pretty row 3
  • Pretty row 4
  • Pretty row 5
  • Pretty row 6
  • Pretty row 7
  • Pretty row 8
  • Pretty row 9
  • Pretty row 10
  • Pretty row 11
  • Pretty row 12
  • Pretty row 13
  • Pretty row 14
  • Pretty row 15
  • Pretty row 16
  • Pretty row 17
  • Pretty row 18
  • 四、运行效果

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    相关文章

    前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
    前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
    前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
    前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
    前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
    前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...