進入視口時，僅自動滾動嵌入式窗口一次。 無法向上滾動

Question

我將圖像嵌入到具有背景圖像的容器中，以提供在頁面內滾動的效果。 最初，滾動效果是在頁面加載時發生的，這個簡單的腳本可以很好地工作。

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

但是，該元素現在離頁面太遠了，我希望當該元素進入視口的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() {
  var flag = true;
    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 && flag === true ) {
              $(this).animate({ scrollTop: $(this)[0].scrollHeight}, 2500, "easeInOutCubic"); //animate embedded scroller
              flag = false;
            } 
          });
      } // end scroll limit
  }); // end window scroll function

問題是這樣的：我希望自動滾動發生一次然后停止。 現在，它可以進入視口，但是如果我嘗試手動滾動圖像，它會繼續向后推或卡住。 您無法使元素正常滾動。 我試圖在代碼中使用該標志來停止動畫，但無法使其成功運行。

當元素在視口中占80％，但是在一段時間后完全停止時，如何觸發此動畫？

這也是我也模擬的一個Codepen http://codepen.io/jphogan/pen/PPQwZL?editors=001如果向下滾動，則進入視口時會看到圖像元素自動滾動，但是如果嘗試將該圖像向上滾動到其容器中，將無法正常工作。

謝謝！

Answer 1

我對您的腳本進行了一些調整：

// 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。

嘗試一下是否適合您：)

干杯!