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。

尝试它是否适合您：）

干杯！

进入视口时，仅自动滚动嵌入窗口一次。无法向上滚动

1 个答案: