Автоматическая прокрутка встроенного окна только один раз при входе в область просмотра. Не могу прокрутить назад

У меня есть изображение, встроенное в контейнер с фоновым изображением, чтобы создать эффект прокрутки страницы. Первоначально у меня был эффект прокрутки при загрузке страницы с этим простым фрагментом скрипта, который работал отлично.

 $(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 Если вы прокрутите вниз, вы увидите, что элемент изображения автоматически прокручивается, когда он входит в область просмотра, но если вы попытаетесь затем прокрутить это изображение вверх в его контейнере, это не сработает.

Спасибо!


javascript scroll jquery autoscroll
person jphogan    schedule 22.10.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я немного подправил ваш скрипт:

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

Попробуйте, если это работает для вас :)

Ваше здоровье!

person CodeGems    schedule 22.10.2015
comment
Потрясающий! Работает отлично. Какое простое исправление .. которое я бы, наверное, никогда не нашел :) - person jphogan; 22.10.2015