JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>
<div class="block1"></div>
<div class="block2"></div>

CSS

.block1 { background-color: red; height: 100px; }
.block2 { background-color: blue; height: 100px; }

JavaScript

var isMouseScroll = false;

window.addEventListener('wheel',function(e)
{
  alert('mouse wheel');
  isMouseScroll = true;
});

window.addEventListener('scroll',function(e)
{
  if(!isMouseScroll) {
   alert('scroll');
  }
    
  isMouseScroll = false;
});