$('.section.active').fadeIn(1000); //Firefox $('body,html').bind('DOMMouseScroll', function(e){ var currentSlideIndex = $('.section.active').index(), nextSlideIndex = currentSlideIndex + 1; nextSlide = $('.section').eq(nextSlideIndex), prevSlideIndex = currentSlideIndex - 1; prevSlide = $('.section').eq(prevSlideIndex); if(e.originalEvent.detail > 0) { //scroll down if(nextSlideIndex == ($('.section:last').index() + 1)) { return false; } else { $('.section').removeClass('active').fadeOut(); $(nextSlide).addClass('active').fadeIn(1000); } }else { //scroll up if(prevSlideIndex == ($('.section:first-child').index() - 1)) { return false; } else { $('.section').removeClass('active').fadeOut(); $(prevSlide).addClass('active').fadeIn(1000); } } //prevent page fom scrolling return false; }); //IE, Opera, Safari $('body,html').bind('mousewheel', function(e){ var currentSlideIndex = $('.section.active').index(), nextSlideIndex = currentSlideIndex + 1; nextSlide = $('.section').eq(nextSlideIndex), prevSlideIndex = currentSlideIndex - 1; prevSlide = $('.section').eq(prevSlideIndex); if(e.originalEvent.wheelDelta < 0) { //scroll down if(nextSlideIndex == ($('.section:last').index() + 1)) { return false; } else { $('.section').removeClass('active').fadeOut(); $(nextSlide).addClass('active').fadeIn(1000); } }else { //scroll up if(prevSlideIndex == ($('.section:first-child').index() - 1)) { return false; } else { $('.section').removeClass('active').fadeOut(); $(prevSlide).addClass('active').fadeIn(1000); } } //prevent page fom scrolling return false; }); 
 body { overflow: hidden; } .section { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fullpage"> <div class="section active">text1</div> <div class="section ">text2</div> <div class="section ">text3</div> <div class="section ">text4</div> <div class="section active"></div> <div class="section ">text5</div>

How to make a ban or cancel scrolling? That is, if the user turned down many times that would only work 1 time? or if he smoked down and then up the animation went back and the previous slide opened ??

    1 answer 1

    How to make a ban or cancel scrolling? That is, if the user turned down many times that would only work 1 time?

    You can use the debounce pattern implemented, for example, in this plugin .

     // Обратите внимание, что вы можете указать два события в bind, // не обязательно дублировать обработчики, если код идентичен. // Для определения браузера лучше использовать логику внутри функции $('body,html').bind('mousewheel DOMMouseScroll', $.debounce(250, function(e) { ... }));

    The handler code will be called no more than once every 250 milliseconds.

    • when bind wrote like that ('mousewheel DOMMouseScroll', then it stopped working in chrome. If you write separately then everything is fine - Vlad467
    • Apparently, the problem is in the function itself (the code is slightly different there), because the code is $('body, html').bind('mousewheel DOMMouseScrol', function() { console.log('scroll') }); works correctly in chrome - Artem Korsunov