Как сделать запрет или отмену прокрутки?

170

06 октября 2018, 03:20

$('.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>

Как сделать запрет или отмену прокрутки? То есть если пользователь много раз крутил вниз что бы сработало только 1 раз ? или же если покуртил вниз и потом вверх анимация пошла обратно и открылся предыдущий слайд??

Answer 1

Как сделать запрет или отмену прокрутки? То есть если пользователь много раз крутил вниз что бы сработало только 1 раз ?

Вы можете использовать паттерн debounce, реализованный, например, в этом плагине.

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

Код обработчика будет вызываться не чаще, чем раз в 250 миллисекунд.