本文共 3264 字，大约阅读时间需要 10 分钟。

最近闲下来，想着多写点实用的组件。后续会陆续放更多功能性模块，大家可以多关注一下。

首先，上一下组件的参数配置：

• 类型（type）：默认为"show"，表示当浏览器滚动到指定位置的节点时触发"show"事件。"scroll"则表示当浏览器滚动经过指定节点时触发"scroll"事件。
• 位置（pos）：默认为"#scrollBox"，用于获取指定节点，通过这个节点的位置来判断滚动情况。
• 延迟距离（delayDistance）：设置在指定位置的上下浮动距离，单位为像素，可为负值。
• 单次触发（single）：true表示只触发一次，false表示可以多次触发。
• 进入回调（passCallback）：当滚动超过指定位置时的触发函数。
• 退出回调（backCallback）：当滚动小于指定位置时的触发函数。

示例代码如下：

function scrollTrigger(obj) {    this.set = {        type: "show",        pos: "#scrollBox",        delayDistance: 0,        single: true,        passCallback: function() {},        backCallback: function() {}    };    this.passFlag = false;    this.backFlag = false;    $.extend(this.set, obj);    var _this = this;    this.init = function() {        $(window).scroll(function() {            if (_this.set.type === "scroll") {                if ($(window).scrollTop() > $($this.set.pos).offset().top + _this.set.delayDistance) {                    if (_this.set.single === true && _this.passFlag === false) {                        _this.set.passCallback();                        _this.passFlag = true;                    } else if (_this.set.single === true && _this.passFlag === true) {                        // 无操作                    } else {                        _this.set.passCallback();                    }                }                if ($(window).scrollTop() < $($this.set.pos).offset().top + _this.set.delayDistance) {                    if (_this.set.single === true && _this.backFlag === false) {                        _this.set.backCallback();                        _this.backFlag = true;                    } else if (_this.set.single === true && _this.backFlag === true) {                        // 无操作                    } else {                        _this.set.backCallback();                    }                }            }            if (_this.set.type === "show") {                if ($(window).scrollTop() > $($this.set.pos).offset().top - $(window).height() + _this.set.delayDistance) {                    if (_this.set.single === true && _this.passFlag === false) {                        _this.set.passCallback();                        _this.passFlag = true;                    } else if (_this.set.single === true && _this.passFlag === true) {                        // 无操作                    } else {                        _this.set.passCallback();                    }                }                if ($(window).scrollTop() + $(window).height() < $($this.set.pos).offset().top + _this.set.delayDistance) {                    if (_this.set.single === true && _this.backFlag === false) {                        _this.set.backCallback();                        _this.backFlag = true;                    } else if (_this.set.single === true && _this.backFlag === true) {                        // 无操作                    } else {                        _this.set.backCallback();                    }                }            }        });    };    this.init();}

调用方法如下：

var trigger1 = new scrollTrigger({    type: "show",    pos: "#trigger1",    single: false,    delayDistance: 0,    passCallback: function() {        console.log("pass");    },    backCallback: function() {        console.log("back");    }});

这个组件主要用于监听页面滚动事件，根据配置的条件自动触发指定的回调函数，适用于各种滚动控制场景。

转载地址：http://wiufz.baihongyu.com/