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

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

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

• 类型（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/