Javascript在超时滚动时添加类

Question

当指定的类滚动到视图中时，我在添加类时遇到了一些问题，并且在添加类之间存在延迟。

我有 3 个并排的 div，都带有在 javascript 代码中看到的类 fadeInDownScroll。

onScrollReach 函数有效，并且当滚动到达时添加了类 fadeInDown，但是所有三个 div 都同时添加了这个。

下面是我一直在尝试工作的 javascript 代码：

function onScrollReach(selector, classToBeAdded, offset, delayTime, callback) {
    var didScroll = false;
    var this_top;
    var height;
    var top;

    //If no offset, set one as 0 so that its initialised
    if(!offset) { var offset = 0; } 
    $(window).scroll(function() {
        didScroll = true;
    });
    //Set interval of a tenth of a second, so this will trigger 10 times a second
    setInterval(function() {
        //If they've scrolled within the last 1/10th of a second
        if (didScroll) {

        //Prevent retrigger by setting false
        didScroll = false;
        //Get scroll height
        top = $(this).scrollTop();
        //For each of the selector element (class you're looking for)
        $(selector).each(function(i){
            //Set position of where on page you want it to trigger the event
            this_top = $(this).offset().top - offset;
            height   = $(this).height();

            // Scrolled within current section & doesn't already have the class
            if (top >= this_top && !$(this).hasClass(classToBeAdded)) {
            //=$(this).addClass(classToBeAdded);

            setTimeout(function(){
                console.log(delayTime * (i / 2));
                console.log('class added');
                $(this).addClass(classToBeAdded);
            }, 100);
            //You can call it with a function so tha tyou can do something else straight after
            //This only applies if thats the case
            if (typeof callback == "function") callback(selector);
            }
        });
        }
    }, 100);
}

//Target Class, Class to be added, Offset for scroll, Delay Time
onScrollReach(".fadeInDownScroll", "fadeInDown", 600, 3000, '');

我知道这是一个有很多类似帖子的主题，但是在阅读了很多帖子后，我找不到解决这个确切问题的帖子

Answer 1

试试这个更新的代码

function onScrollReach(selector, classToBeAdded, offset, delayTime, callback) {
    var didScroll = false;
    var this_top;
    var height;
    var top;

    //If no offset, set one as 0 so that its initialised
    if(!offset) { var offset = 0; } 
    $(window).scroll(function() {
        didScroll = true;
    });
    //Set interval of a tenth of a second, so this will trigger 10 times a second
    setInterval(function() {
        //If they've scrolled within the last 1/10th of a second
        if (didScroll) {

        //Prevent retrigger by setting false
        didScroll = false;
        //Get scroll height
        top = $(this).scrollTop();
        //For each of the selector element (class you're looking for)
            //Set position of where on page you want it to trigger the event
            this_top = $(this).offset().top - offset;
            height   = $(this).height();

            // Scrolled within current section & doesn't already have the class
            if (top >= this_top && !$(this).hasClass(classToBeAdded)) {
            //=$(this).addClass(classToBeAdded);

            setTimeout(function(){
                console.log('class added');
                $(selector).addClass(classToBeAdded);
            }, 100);
            //You can call it with a function so tha tyou can do something else straight after
            //This only applies if thats the case
            if (typeof callback == "function") callback(selector);
            }
        }
    }, 100);
}

//Target Class, Class to be added, Offset for scroll, Delay Time
onScrollReach(".fadeInDownScroll", "fadeInDown", 600, 3000, '');