为什么 jQuery .one 函数只在向下滚动时起作用？答案

【问题标题】：Why does jQuery .one function only work when scrolling down?为什么 jQuery .one 函数只在向下滚动时起作用？
【发布时间】：2019-09-15 17:44:30
【问题描述】：

当元素在视口中时，我使用以下函数启动动画。如果 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 的原因。

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

【问题讨论】：

好吧，one 将触发一次回调，然后自行销毁。当您开始时，您可以仅在页面上向下滚动，因此从逻辑上讲，在附加 one 回调的情况下不可能向上滚动，因为您必须先向下滚动，这会破坏事件侦听器。
您是否尝试过在您的.one() 函数中进行控制台记录，以查看在您加载页面下方元素的情况下页面加载时是否立即触发它？这可能只发生在浏览器设置滚动位置以让您记住页面上的位置的情况下，所以也许这会在您有机会向上滚动之前触发该功能。
@VLAZ，当您刷新页面时，它会在您所在位置可能位于元素下方的相同位置重新加载它，这要求您的第一次滚动是向上滚动（或者如果您使用元素下方的锚链接）。 “一个”回调不应该在第一个滚动上起作用，即使那个滚动是向上的？
@cj750，是的，我在上面的代码中显示的控制台日志功能在一个功能内。我关闭了 on.load 功能，所以我可以只隔离滚动，不，当我加载元素下方的页面时，它不会记录任何内容。当我向上滚动时，它也不会记录任何内容。如果我从元素上方开始并向下滚动，它只会记录它。

标签： javascript jquery

【解决方案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.')
    }
}

【讨论】：