CODEWITHSUNDEEP
javascripthtmlcss
Arianna22
Arianna22

Reputation: 77

how to change section on scroll?

I am new in css and html. I am trying to make one page project but I don't know how to change the section when I go down with scroll wheel of the mouse. Can anybody help me?

Here's the code:

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>

Upvotes: 3

Views: 6869

Answers (2)

kchuang7
kchuang7

Reputation: 789

I'm assuming that you want a single wheel scroll tick to correspond to a section change. Instead of using CSS scroll snapping or external libraries like jQuery, you can accomplish your goal with just a wheel listener.

The currentSectionIndex - 1 >= 0 and currentSectionIndex + 1 < sections.length conditions prevent subsequent wheel scrolls from exceeding the number of HTML sections there are.

Please refer to the attached JavaScript as the solution as the HTML and CSS provided are unchanged.

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

document.addEventListener('wheel', e => {
  if (e.wheelDeltaY > 0 && currentSectionIndex - 1 >= 0) {
    // wheel up
    sections[currentSectionIndex].className = '';
    currentSectionIndex--;
    sections[currentSectionIndex].className = 'active';
  } else if (e.wheelDeltaY < 0 && 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>

Upvotes: 1

UnpassableWizard
UnpassableWizard

Reputation: 1279

I'm not the best at jQuery but this can help I hope :)

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

Upvotes: 0

Related Questions