Question

当将指定的类滚动到视图中并在添加类之间存在延迟时，添加类遇到了一些麻烦。

我有三个并排的div，所有div的类均在javascript代码中可见。

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, '');

Javascript随着超时滚动添加类

1 个答案: