Блог

Главная - Вопросы по программированию - jQuery: ползунок обнаруживает прокрутку или прокрутку

jQuery: ползунок обнаруживает прокрутку или прокрутку

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть скрипт, который создаст простой слайдер с кнопками для навигации.

Теперь мне нужно сделать этот слайдер управляемым с помощью прокрутки.

Когда пользователь прокручивает вниз, он переходит к следующему ползунку, также обратному.

Кнопки также будут доступны. Таким образом, будет 2 варианта того, как им управлять. С кнопками «Далее» и «назад», а также с прокруткой вниз или вверх.

Есть ли какой-либо вариант, как сделать это самым простым способом?

 var lottieone = document.getElementById('lottieone');
var lottietwo = document.getElementById('lottietwo');
var lottiethree = document.getElementById('lottiethree');
var lottiefour = document.getElementById('lottiefour');

$('#lottieone').show();
$('#lottietwo').hide();
$('#lottiethree').hide();
$('#lottiefour').hide();


function missionsSlide() {
  $('#lottieone').hide();
  $('#lottietwo').show();
  $('#lottiethree').hide();
  $('#lottiefour').hide();
}

function missionsSlideBacc() {
  $('#lottieone').hide();
  $('#lottietwo').show();
  $('#lottiethree').hide();
  $('#lottiefour').hide();
}

function researchSlide() {
  $('#lottieone').hide();
  $('#lottietwo').hide();
  $('#lottiethree').show();
  $('#lottiefour').hide();
}

function educationSlide() {
  $('#lottieone').hide();
  $('#lottietwo').hide();
  $('#lottiethree').hide();
  $('#lottiefour').show();
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="slider">
  <div id="lottieone" class="lottieSlide">
    <div class="content">
      <button onclick="missionsSlide()">HOME</button>
    </div>
  </div>
  <div id="lottietwo" class="lottieSlide mainSliders">
    <div class="content">
      <h1>MISSIONS</h1>
      <button onclick="researchSlide()">Next</button>
    </div>
  </div>
  <div id="lottiethree" class="lottieSlide mainSliders">
    <div class="content">
      <h1>RESEARCH</h1>
      <button onclick="missionsSlideBacc()">Back</button>
      <button onclick="educationSlide()">Next</button>
    </div>
  </div>
  <div id="lottiefour" class="lottieSlide mainSliders">
    <div class="content">
      <h1>EDUCATION</h1>
      <button onclick="researchSlide()">Back</button>
    </div>
  </div>
</section>

Ответ №1:

Попробуйте использовать этот фрагмент.

 $(document).on('mousewheel', '.slider', function (e) {
   var delta = e.originalEvent.wheelDelta;
   if (delta > 0) alert("scrolled Up");
   if (delta < 0) alert("scrolled Down");
   e.preventDefault();
});

Это часто повторяющийся вопрос, поэтому вы также можете найти для него несколько решений