javascript - 为什么 jQuery .one 函数只在向下滚动时有效？

Question

当元素在视口(viewport)中时，我正在使用以下函数启动动画。如果 1) 元素在页面加载时已经在 View 中，或者 2) 第一次滚动到该元素，则动画应该开始。

此代码有效，除了滚动功能仅在向下 滚动到元素时有效。如果我在元素下方加载页面，并向上滚动，动画不会启动:

$(window).on("load", myanimation);

$(window).one("scroll", myanimation); // this only works on downward scroll

这是我检查元素是否可见的方式:

$.fn.isInViewport = function () {
    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

这是我的职能:

function myanimation(e){

    if ($('#welcome').isInViewport()) {  
        console.log('In view.')
    } else {
        console.log('Not in view.')
    }
};

我只希望动画只在第一次滚动时执行，所以这就是我使用 .one 的原因。

如何让动画从任一方向开始？

Answer 1

这是您问题的解决方案。

var once = false;
$(window).on("load", myAnim);
$(window).one("scroll", scollTopCheck);

$.fn.isInViewport = function () {

    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).outerHeight();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

function scollTopCheck(){

    if($(window).scrollTop()>0 && !once){
        once = true;
        $(window).one("scroll", myAnim);
    }else{
        myAnim();  
    }
};

function myAnim(){
    if ($('#welcome').isInViewport()) {  
        console.log('In view.')
    } else {
        console.log('Not in view.')
    }
}