【源码】基于JavaScript的页面元素滚动监听插件

项目简介

Roll是一款轻量级的页面元素滚动监听JS插件，支持IE8+浏览器。它能够在页面元素出现在视口时执行指定操作。不过要注意，一个页面最多只能创建一个Roll实例，因为初始化时会给浏览器绑定scroll、resize、load事件，创建多个实例会导致重复绑定。

项目的主要特性和功能

1. 具备滚动监听功能，可监听页面元素滚动，当元素进入视口时触发操作。
2. 采用回调机制，元素出现在视口时，执行用户定义的回调函数，函数接收Roll对象实例和done函数作为参数。
3. 支持自定义触发条件，能通过设置offsetTop、offsetLeft、offsetRight和offsetBottom参数，自定义回调函数触发位置。
4. 提供实例方法，有push方法用于添加元素到监听队列，destroy方法用于销毁当前Roll实例。

安装使用步骤

1. 确保已下载本项目的源码文件。
2. 将源码文件放置到项目合适位置。
3. 在HTML文件中引入Roll插件的JS文件。
4. 在HTML文件里添加需滚动监听的元素，并设置data-asyncload属性。
5. 在HTML文件底部（</body>标签前）编写JavaScript代码，创建Roll实例并设置参数。 javascript var roll = new Roll({ offsetTop: 100 });
6. 使用push方法添加监听元素并定义回调函数。 javascript roll.push(document.querySelector(".p1"), function (context, done){ console.log('图片1出现在视口，可以执行操作了！'); done(this, context); });
7. 滚动页面，元素进入视口时，执行定义的回调函数。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】