Javascript 进入视口时仅自动滚动嵌入窗口一次。Can'；不要向后滚动

我在一个容器中嵌入了一个图像，该容器带有一个背景图像，以提供在页面内滚动的效果。最初，我使用这个简单的脚本在页面加载时实现了滚动效果，效果非常好

 $(window).on("load", function () {
    $(".embedded_scroller_image").animate({ scrollTop: $('.embedded_scroller_image')[0].scrollHeight}, 2500, "easeInOutCubic");
}); // end on load 

但是，元素现在在页面下方太远了，我希望在元素进入80%的视口时触发动画。这部分代码在这里也可以正常工作（我使用滚动限制器来提高浏览器性能）

问题是：我希望自动滚动发生一次，然后停止。现在，它可以在进入视口时工作，但如果我尝试手动滚动图像，它会不断向下推或结巴。无法使元素正常滚动。我试图使用代码中的标志来停止动画，但无法使其成功运行

当元素在视口中占80%，但在一次之后完全停止时，如何使该动画激发

这是一个我模拟的代码笔如果你向下滚动，你会看到图像元素进入视口时自动滚动，但是如果你试图在它的容器中向上滚动图像，它将不起作用

---

谢谢

我对你的脚本做了一些调整：

// limit scroll call for performance
var scrollHandling = {
    allow: true,
    reallow: function() { scrollHandling.allow = true; },
    delay: 500 //(milliseconds) adjust to the highest acceptable value
};

$(window).on('scroll', function() {

if(scrollHandling.allow) { // call scroll limit
    var inViewport = $(window).height()*0.8; // get 80% of viewport

    $('.embedded_scroller_image').each(function() { // check each embedded scroller
        var distance = $(this).offset().top - inViewport; // check when it reaches offset

        if ($(window).scrollTop() >= distance ) {
            $(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
            scrollHandling.allow = false;
        } 

    });

} // end scroll limit

}); // end window scroll function

我已经踢出了你的旗帜，只是简单地使用了scrollHandling.allow

如果对您有效，请尝试：）

---

干杯

太棒了！工作完美。这是多么简单的一个解决办法。。我可能永远也找不到：）

// limit scroll call for performance
var scrollHandling = {
    allow: true,
    reallow: function() { scrollHandling.allow = true; },
    delay: 500 //(milliseconds) adjust to the highest acceptable value
};

$(window).on('scroll', function() {

if(scrollHandling.allow) { // call scroll limit
    var inViewport = $(window).height()*0.8; // get 80% of viewport

    $('.embedded_scroller_image').each(function() { // check each embedded scroller
        var distance = $(this).offset().top - inViewport; // check when it reaches offset

        if ($(window).scrollTop() >= distance ) {
            $(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
            scrollHandling.allow = false;
        } 

    });

} // end scroll limit

}); // end window scroll function