一个元素滚动监听插件 Waypoints

 2016年04月26日    244     声明


在Web开发中,有始需要监听页面或DOM元素的滚动事件,然后通过滚动事件触发一些函数调用,如,我们会根据页面滚动来加载新数据等。Waypoints是一个用于元素滚动事件监听的插件,还可用于元素固定和无限滚动。Waypoints提供了几种使用方式,即可以结合JQueryZepto库使用,也可以不依赖第三方库单独使用。


  1. 安装与引用
  2. Waypoints的使用

1. 安装与引用

1.1 安装

Waypoints可以通过bower前端包管理器安装:

npm install waypoints

也可通过npmNode.js包管理器安装:

npm install waypoints

或者直接通过下面的链接下载:

https://github.com/imakewebthings/waypoints/zipball/latest


1.2 引用

下载Waypoints后,在其lib/目录下有基于JQueryZepto构建的版本,也有不依赖其它库独立使用的版本。

引用无依赖的Waypoints,可以像下面这样引用:

<script src="/path/to/noframework.waypoints.min.js"></script>

引用基于JQuery库构建的版本,除了要引用Waypoints库外,还要引用JQuery库。可以像下面这样引用:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.waypoints.min.js"></script>


2. Waypoints的使用

下载并引用Waypoints后,就可以使用这个插件了,下面是一些简单的使用介绍。

2.1 基本使用

添加引用后,这个插件会暴露一个全局类Waypoint。添加一个元素监听就是创建一个Waypoint类实例,创建时需要传入一个option对象。在这个对象中,可以添加很多属性,其中有两个属性是必须的:elementhandler

var waypoint = new Waypoint({
  element: document.getElementById('basic-waypoint'),
  handler: function() {
    notify('基本 waypoint 触发');
  }
})

在上面使用的两个选项中,element表示要添加滚动监听的DOM元素;handler表监听函数,在监听到元素的滚动事件后触发。


滚动方向

滚动监听会在元素向上或向下滚动时触发,有时我们可能需要增加一些判断。在handler加调函数中,有一个direction会被传入,通过这个参数我们可以判断滚动的方向:

var waypoint = new Waypoint({
  element: document.getElementById('direction-waypoint'),
  handler: function(direction) {
    notify('方向:' + direction)
  }
})


滚动幅度

滚动监听会任意幅度上被触发,有时我们需要在滚动达到一定幅度后才触发回调。可以在创建Waypoints对象实例时增加一个offset选项:

var waypoint = new Waypoint({
  element: document.getElementById('px-offset-waypoint'),
  handler: function(direction) {
    notify('在滚20px后才会触发');
  },
  offset: 20 
})

在上面示例中,只有滚动幅度达到20px会才会触发回调。

由于屏幕分辨率的不同,我们可能更希望使用滚动百分比来触发回调,offset同样支持百分比的设置方式:

var waypoint = new Waypoint({
  element: document.getElementById('px-offset-waypoint'),
  handler: function(direction) {
    notify('在滚20%后才会触发');
  },
  offset: '20%' 
})


2.2 元素固定

Waypoint类中还提供了一个子类Waypoint.Sticky,该固类用于将元素固定在某一位置。在Web开发中,如果需要将一个元素固定在某一位置,可以使用这个类。

使用Waypoint类似,使用Waypoint.Sticky子类固定元素同样也需要创建一个类实例:

var sticky = new Waypoint.Sticky({
  element: $('.basic-sticky-example')[0]
})

创建Sticky实例后,创建方法会做以下操作:

  • 创建一个元素包装
  • 设置元素包装的高度
  • 当元素到达窗口项部时,添加该元素添加一个CSS样式类

被添加的CSS样式类默认为.stuck,如果使用使用其它样式类名,可以在Option选项中设置。添加的样式,需要做以下两个设置:

.stuck {
  position:fixed;
  top:0;
}

Sticky类的选项Option

创建Sticky实例时,同样可以传递一个Option对象,在Waypoint中使用的选项同样都可以使用。除此之外,还有以下几个仅用于Sticky的选项:

  • direction-应用于stuckClass的方向设置。默认为:'down right'
  • stuckClass-设置固定位置的CSS样式名。默认为:'stuck'
  • wrapper-包裹在固定元素外面的HTML包装器。默认为:'<div class="sticky-wrapper" />'


2.3 无限滚动

“无限滚动”是将传统的“下一页”式的数据加载方式,重定义到一个AJAX控制的无限滚动的UI模式中。

Waypoint提供了用于无限滚动的子类Waypoint.Infinite,要使用它同样需要创建一个实例:

var infinite = new Waypoint.Infinite({
  element: $('.infinite-container')[0]
})

当使用默认选项时,会生成类似以下HTML的代码,我们可通过修改InfiniteOption来自定义输出:

<div class="infinite-container">
  <div class="infinite-item">...</div>
  <div class="infinite-item">...</div>
  <div class="infinite-item">...</div>
  ...
</div>
<a class="infinite-more-link" href="/next/page">More</a>


Infinite类的选项Option

  • container-容器,新加载的选项都会被添加到这个容器中。默认值为'auto',即使用element相同的元素
  • items-单个项目的容器
  • loadingClass-单个项目的容器。默认为.infinite-item
  • loadingClass-加载新项目时显示的内容。默认为infinite-loading
  • more-加载“下一页”的选择器。默认为.infinite-more-link
  • onBeforePageLoad-在加载新数据前调用的回调函数。默认为$.noop
  • onAfterPageLoad-在加载新数据后调用的回调函数。默认为.noop。回调函数中会包含一个参数$items