一个元素滚动监听插件Waypoints

作者: admin 发布日期: 2026-05-19T02:44 阅读: 459


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


  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/目录下有基于JQuery和Zepto构建的版本，也有不依赖其它库独立使用的版本。

引用无依赖的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对象。在这个对象中，可以添加很多属性，其中有两个属性是必须的：element、handler：

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的代码，我们可通过修改Infinite的Option来自定义输出：

<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