基于iScroll实现内容滚动效果

 更新时间:2018年03月21日 14:55:12   作者:Cuixinyang1  
这篇文章主要为大家详细介绍了基于iScroll实现内容滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、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最基本的功能,接下来博主会尝试拉动刷新等功能。

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

相关文章

  • JavaScript中工厂函数与构造函数示例详解

    JavaScript中工厂函数与构造函数示例详解

    这篇文章主要给大家介绍了关于JavaScript中工厂函数与构造函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • JavaScript数组去重由慢到快由繁到简(优化篇)

    JavaScript数组去重由慢到快由繁到简(优化篇)

    本文给大家介绍通过indexof去重,hash去重,排序后去重及set去重由慢到快有繁到简的方法给大家介绍了js数组去重的方法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-08-08
  • GRID拖拽行的实例代码

    GRID拖拽行的实例代码

    这篇文章介绍了GRID拖拽行的实例代码,有需要的朋友可以参考一下
    2013-07-07
  • 原生JavaScript+LESS实现瀑布流

    原生JavaScript+LESS实现瀑布流

    这篇文章主要介绍了原生JavaScript+LESS实现瀑布流的方法,附上了具体实例,这里推荐给有需要的小伙伴。
    2014-12-12
  • 微信小程序数据劫持代理的实现

    微信小程序数据劫持代理的实现

    本文主要介绍了微信小程序 数据劫持代理的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • javascript常用功能汇总

    javascript常用功能汇总

    本文给大家总结了12个javascript常用的基本功能,十分的实用,这里推荐给大家,需要的朋友可以参考下
    2015-07-07
  • JS检测浏览器开发者工具是否打开的方法详解

    JS检测浏览器开发者工具是否打开的方法详解

    本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法,需要的朋友可以参考下
    2020-10-10
  • XDomainRequest之IE8和IE9发送跨域请求拒绝访问解决方法

    XDomainRequest之IE8和IE9发送跨域请求拒绝访问解决方法

    这篇文章主要介绍了XDomainRequest之IE8和IE9发送跨域请求拒绝访问解决方法,需要的朋友可以参考下
    2023-06-06
  • 利用js编写响应式侧边栏

    利用js编写响应式侧边栏

    这篇文章主要为大家详细介绍了利用js编写响应式侧边栏的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • js加减乘除精确运算方法实例代码

    js加减乘除精确运算方法实例代码

    这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论