Блог

Главная - Вопросы по программированию - как изменить раздел при прокрутке?

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

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я новичок в css и html. Я пытаюсь создать проект одной страницы, но я не знаю, как изменить раздел, когда я спускаюсь с помощью колеса прокрутки мыши. Кто-нибудь может мне помочь?

Вот код:

 section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  background-color: black;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

section.active {
  visibility: visible;
}  
 <section data-section="0" class="active">
  <h1>hello! I'm the first section!</h1>
</section>
<section data-section="1">
  <h2>Hello! I'm the second section!</h2>
</section>
<section data-section="2">
  <h2>Hello! I'm the third section!</h2>
</section>

Ответ №1:

Я предполагаю, что вы хотите, чтобы один тик прокрутки колеса соответствовал изменению раздела. Вместо использования CSS scroll snapping или внешних библиотек, таких как jQuery, вы можете достичь своей цели с помощью простого прослушивателя wheel.

Условия currentSectionIndex - 1 >= 0 и currentSectionIndex 1 < sections.length не позволяют последующим прокруткам колеса превышать количество имеющихся разделов HTML.

Пожалуйста, обратитесь к прилагаемому JavaScript в качестве решения, поскольку предоставленные HTML и CSS не изменились.

 let sections = document.getElementsByTagName('section');
// tracks index of current section
let currentSectionIndex = 0;

document.addEventListener('wheel', e => {
  if (e.wheelDeltaY > 0 amp;amp; currentSectionIndex - 1 >= 0) {
    // wheel up
    sections[currentSectionIndex].className = '';
    currentSectionIndex--;
    sections[currentSectionIndex].className = 'active';
  } else if (e.wheelDeltaY < 0 amp;amp; currentSectionIndex   1 < sections.length) {
    // wheel down
    sections[currentSectionIndex].className = '';
    currentSectionIndex  ;
    sections[currentSectionIndex].className = 'active';
  }
});  
 section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  color:white;
  background-color: black;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
section.active {
  visibility: visible;
}  
 <section data-section="0" class="active">
  <h1>hello! I'm the first section!</h1>
</section>
<section data-section="1">
  <h2>Hello! I'm the second section!</h2>
</section>
<section data-section="2">
  <h2>Hello! I'm the third section!</h2>
</section>

Ответ №2:

Я не лучший в jQuery, но это может помочь, я надеюсь 🙂

 $(document).ready(function() {
  $('#body').bind('mousewheel', function(e) {
    if (e.originalEvent.wheelDelta / 120 > 0) {

      var num = $('.active').attr('data-section');
      num--;
      if (num <= -1) {
        num = num   3;
      }
      $('.active').removeClass('active');
      $('section[data-section="'   num   '"]').addClass('active');
    } else {

      var num = $('.active').attr('data-section');
      num  ;
      if (num >= 3) {
        num = 0;
      }
      $('.active').removeClass('active');
      $('section[data-section="'   num   '"]').addClass('active');
    }
  });
});  
 body {
  width: 100vw;
  height: 100vh;
}

section {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  background-color: black;
  visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

section.active {
  visibility: visible;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<body id="body">
  <section data-section="0" class="active">
    <h1>hello! I'm the first section!</h1>
  </section>
  <section data-section="1">
    <h2>Hello! I'm the second section!</h2>
  </section>
  <section data-section="2">
    <h2>Hello! I'm the third section!</h2>
  </section>
</body>