Block scrolling in the middle of the landing. How to do?

Good afternoon. There is a landing page, in the middle of a section, it 100vh when to get it done one block at a time scrolling. it turns out this section of the vertical scrolling slides. When people came to this section, scrolling is disabled and the type scroats only slides when he came to the last slide scrolling on, you can continue to scroll landing page. Duck now the question is how to make it so when I scroll from the bottom up you again proglatyvanie slides from the last to the first. that is, the focus was again on this unit.
here is the piece of code in js
// ---------- block scrolling start ----------
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>';
},
},
});

// methods of the slider 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; // Flag scroll, if false, it is disabled.
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; 
}

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

function disableScroll() {
 if (window.addEventListener) // FF older
 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; 
}
// ---------- block scrolling end ----------


Link to the sandbox
June 7th 19 at 15:01
0 answer

Find more questions by tags JavaScriptjQuery