学习使用jquery iScroll.js移动端滚动条插件

学习使用jQuery iScroll.js移动端滚动条插件的完整攻略

iScroll.js是一个基于jQuery的移动端滚动条插件，可以添加水平或垂直滚动条，支持惯性滚动、滑动时动态加载数据等功能，而且非常适合移动端网站的使用。下面将详细介绍学习使用iScroll.js的完整攻略。

步骤一：引入iScroll.js

在使用iScroll.js之前，需要先引入所需的js和css文件，例如：

<link rel="stylesheet" href="iscroll.css">
<script src="jquery.min.js"></script>
<script src="iscroll.js"></script>

步骤二：添加DOM元素并初始化iScroll

在HTML中添加需要添加滚动条的元素，并根据需要设置相关的样式。然后利用iScroll构造函数来初始化，示例如下：

<div id="wrapper">
  <ul>
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
  </ul>
</div>
<script>
  var myScroll = new IScroll('#wrapper');
</script>

步骤三：配置iScroll.options

iScroll还提供了许多配置选项供开发者自由设置，例如开启惯性滚动、滚动的方向、滚动条的位置等等。示例代码如下：

var myScroll = new IScroll('#wrapper', {
  scrollbars: true,
  mouseWheel: true,
  interactiveScrollbars: true,
  shrinkScrollbars: 'scale',
  fadeScrollbars: true,
  disablePointer: true,
  useTransform: true,
  useTransition: true,
  scrollbarClass: 'myScrollbar',
  click: true,
  tap: true
});

其中，scrollbars表示是否开启滚动条，mouseWheel表示是否开启滚轮支持，interactiveScrollbars表示是否可以交互式的调整滚动条位置，shrinkScrollbars表示是否在滚动结束时缩小滚动条，fadeScrollbars表示是否在滚动停止时逐渐淡出滚动条，disablePointer表示是否禁用指针事件，useTransform表示是否使用CSS3 transform属性进行滚动，useTransition表示是否使用CSS3 transition属性进行滚动，scrollbarClass表示滚动条的自定义样式名，click表示是否允许用户单击滚动事件，tap表示是否允许用户点击滚动事件。

步骤四：调用iScroll实例

在进行iScroll的使用时，可以通过以下三种方式调用实例：

1. 直接调用实例的refresh方法，当容器尺寸发生变化时会触发：

window.addEventListener('resize', function () {
  myScroll.refresh();
});

1. 调用实例的scrollTo和scrollBy方法，以滚动到指定的位置：

myScroll.scrollTo(0, -100, 1000, IScroll.utils.ease.elastic);
myScroll.scrollBy(0, 100, 1000, IScroll.utils.ease.elastic);

其中，scrollTo方法接受四个参数：x、y分别表示水平和竖直方向的位置偏移量，time表示滚动的毫秒数，easing表示滚动的缓动函数。同理，scrollBy方法也接受相同的四个参数。

1. 获取实例当前的位置和滚动方向，例如：

console.log(myScroll.x);
console.log(myScroll.y);
console.log(myScroll.directionX);
console.log(myScroll.directionY);

上面是iScroll.js的主要使用方法和配置选项，下面将通过两个示例来演示iScroll的实际应用。

示例一：使用iScroll展示图片列表

在此示例中，我们展示了一组图片列表，并通过iScroll插件添加了垂直滚动条，用户可以通过手动滑动列表来查看所有的图片。

HTML代码：

<div id="wrapper">
  <ul>
    <li><img src="img/1.jpg"></li>
    <li><img src="img/2.jpg"></li>
    <li><img src="img/3.jpg"></li>
    <li><img src="img/4.jpg"></li>
    <li><img src="img/5.jpg"></li>
    <li><img src="img/6.jpg"></li>
  </ul>
</div>

JavaScript代码：

var myScroll = new IScroll('#wrapper', { scrollbars: true, mouseWheel: true });

示例二：使用iScroll动态添加数据并展示

在此示例中，我们使用iScroll实现了一个上拉刷新的功能，用户可以在页面底部拖动滚动条来加载更多的数据。

HTML代码：

<div id="wrapper">
  <ul>
    <li>第一条数据</li>
    <li>第二条数据</li>
    <li>第三条数据</li>
    <li>第四条数据</li>
    <li>第五条数据</li>
    <li>第六条数据</li>
  </ul>
  <div id="scroller">
    <div id="pullUp">
      <span class="pullUpIcon"></span>
      <span class="pullUpLabel">上拉加载更多数据</span>
    </div>
  </div>
</div>

JavaScript代码：

var myScroll = new IScroll('#wrapper', { scrollbars: true, mouseWheel: true });

var pullUpEl = document.getElementById('pullUp');
var pullUpOffset = pullUpEl.offsetHeight;

myScroll.on('scrollEnd', function () {
  if (this.y <= this.maxScrollY - pullUpOffset) {
    pullUpEl.className = '';
    pullUpEl.querySelector('.pullUpLabel').innerHTML = '正在加载...';

    // 加载更多数据

    setTimeout(function () {
      myScroll.refresh();
      pullUpEl.className = 'hidden';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多数据';
    }, 1000);
  }
});

以上便是使用iScroll.js插件开发移动端滚动条的完整攻略，通过这个攻略，我们可以轻松入手iScroll.js的基本使用和配置，并且可以通过两个示例了解到iScroll.js在实际开发中的运用。