JSFiddle - React, Tailwind, and code Playground

HTML

<section class="block">
  <div class="full-width blue">
  </div>

  <div class="full-width green">
  </div>

  <div class="full-width orange">
  </div>
</section>

CSS

.block{
    width: 300px;
    height: 104px;
    position: fixed;
    left: 1em;
    top: 1em;
    z-index: 999;
}


.blue{
    background-color: blue;
}

JavaScript

var one = $('.full-width').first();
$('.block').bind('mousewheel', function(e){
    if(e.originalEvent.wheelDelta /120 > 0) {
        if(one.prev().is('.full-width')){
            one.addClass('none');
            one = one.prev();
        }
    }
    else{
        if(one.next().is('.full-width')){
            one.addClass('none');
            one = one.next();
        }
    }
    one.removeClass('none');
});