自动滚动嵌入窗口只有一次时，进入视口.无法向上滚动

Auto-scroll embedded window only once when entering viewport. Can't scroll back up

本文关键字：滚动 视口 一次 窗口      更新时间：2023-09-26

我在一个带有背景图像的容器中嵌入了一个图像，以便在页面内滚动。最初，我让滚动效果在页面加载时发生，使用这个简单的脚本，效果很好。

 $(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%时，我怎么能让这个动画着火，但在一次后完全停止?

这是一个我也模拟了http://codepen.io/jphogan/pen/PPQwZL?editors=001如果你向下滚动，你会看到图像元素自动滚动，当它进入视口，但如果你试图向上滚动图像在其容器，它将不起作用。

谢谢!

我已经稍微调整了一下你的脚本:

// 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。允许已声明

试试它是否适合你:)

干杯!

相关文章：