I use classname: show to tell what is the next item, but it add on multiple items while I scrolling. Even I had used the selector:first it still went wrong. Or I should get the name of each scroll-block to an array?
Here is the origin
$('.scroll-block:first').addClass('show');
$(window).on('mousewheel', function(event) {
if (event.originalEvent.wheelDelta <= 0) {
$('.scroll-block.show').prev('.scroll-block:first').removeClass('show')
$('.scroll-block.show').next('.scroll-block:first').addClass('show')
} else {
$('.scroll-block.show').next('.scroll-block:first').removeClass('show')
$('.scroll-block.show').prev('.scroll-block:first').addClass('show')
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-wrap">
<div class="scroll-block"></div>
<div class="scroll-block"></div>
<div class="scroll-block"></div>
</div>