0

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

$('#myContainer').bind('mousewheel', function(e) {
  var sec_1 = $(".section");
  let main__current = $('.main__current');
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (main__current.is(':first-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__next")
    main__current.prev().addClass("main__current").removeClass("main__next main__previous")
    
  } else {
    if (main__current.is(':last-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__previous");
    main__current.next().addClass("main__current").removeClass("main__next main__previous")
  }
});
body {
  overflow: hidden
}

.main__section {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-transition: top .3s linear;
  transition: top .3s linear;
}

.main__previous {
  top: -100%;
}

.main__current {
  z-index: 1;
  top: 0;
}

.main__next {
  top: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer">
  <div class="section section_1 main__section main__current">
    1
  </div>
  <div class="section section_2 main__section main__next">
    2
  </div>
  <div class="section section_3 main__section main__next">
    3
  </div>
</div>

1 ответ 1

1

var func = function(e) {

  setTimeout(function() {
    $('#myContainer').one('mousewheel', func);
  }, 500);

  var sec_1 = $(".section");
  let main__current = $('.main__current');
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (main__current.is(':first-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__next")
    main__current.prev().addClass("main__current").removeClass("main__next main__previous")

  } else {
    if (main__current.is(':last-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__previous");
    main__current.next().addClass("main__current").removeClass("main__next main__previous")
  }


};

$('#myContainer').one('mousewheel', func);
body {
  overflow: hidden
}

.main__section {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-transition: top .3s linear;
  transition: top .3s linear;
}

.main__previous {
  top: -100%;
}

.main__current {
  z-index: 1;
  top: 0;
}

.main__next {
  top: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer">
  <div class="section section_1 main__section main__current">
    1
  </div>
  <div class="section section_2 main__section main__next">
    2
  </div>
  <div class="section section_3 main__section main__next">
    3
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.