Поблочная прокрутка в середине лендинга. Как сделать?

Question

chippolino293 @chippolino293

JavaScript

Поблочная прокрутка в середине лендинга. Как сделать?

Добрый день. Есть landing page, в середине есть секция, она 100vh, когда до нее доходишь делается поблочная прокрутка. получается в этой секции вертикальная прокрутка слайдов. Когда человек дошел до этой секции скролл отключается и типа скроялтся только слайды, когда дошел до последнего слайда скролл вкл и можно дальше листать landing page. Дак вот вопрос такой как сделать так, когда прокручиваешь снизу вверх у тебя опять пролистывались слайды с последнего на первый. то есть фокус опять был на этом блоке.
вот кусок кода js -

// ---------- поблочная прокрутка старт ----------
var swiper = new Swiper('.stages_swiper', {
  direction: 'vertical',
  slidesPerView: 1,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="stages_head__circle ' + className + '"></span>';
    },
  },
});

// методы слайдера swiper
var lastSlide = true;
swiper.on('reachEnd', function () {
  swiper.mousewheel.disable();
  enableScroll();
});
swiper.on('reachBeginning', function(){
  swiper.mousewheel.disable();
  enableScroll();
  animateFlag = 1;
})

var scroll = true; // Флаг прокрутки, если false, то отключена.
var animateFlag = 1;

window.onscroll = function() {
    
    if (animateFlag) {
        var scrolled = window.pageYOffset || document.documentElement.scrollTop;

        if (scrolled > $('.stages_swiper').offset().top && scrolled < $('.stages_swiper').offset().top + $('.stages_swiper').width()) {
            $('body,html').animate({
                scrollTop: $('.stages_swiper').offset().top
            }, 700);   
            animateFlag = 0;
            disableScroll();
            swiper.mousewheel.enable();
        } 
  }
    
}


var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}

function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
        preventDefault(e);
        return false;
    }
}

function disableScroll() {
  if (window.addEventListener) // older FF
      window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.onwheel = preventDefault; // modern standard
  window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
  window.ontouchmove  = preventDefault; // mobile
  document.onkeydown  = preventDefaultForScrollKeys;
}

function enableScroll() {
    if (window.removeEventListener)
        window.removeEventListener('DOMMouseScroll', preventDefault, false);
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null;  
    document.onkeydown = null;  
}
// ---------- поблочная прокрутка конец ----------

Ссылка на песочницу