Question

当元素在视口中时，我正在使用以下函数来启动动画。如果1）元素在页面加载时已经在视图中，或者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.')
    }
}

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

1 个答案: