JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>
<script src="https://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<div class="current">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>

CSS

div {
    border: 1px solid black;
    height: 600px;
}

div.current {
    background-color: orange;
}

JavaScript

var current
var Timeout = false;
$('body').mousewheel( function (event, delta) {
				event.preventDefault();
          if(Timeout)  
            return //if Timout == TRUE, then stop this function
          Timeout = true //if Timout == FALSE, set TRUE and then execute

          pageScroll(event, delta) //scrollfunction to be called, Scrolling all the way!! YEAAH
          setTimeout(function(){Timeout = false},2000)//Set Timeout to False after 0.25s
        });

function pageScroll(event,delta) {
        var $current = $('div.current');
        
        console.log(delta);
        console.log($current);
                
        if (delta > 0) {
            $prev = $current.prev();
            
            if ($prev.length) {
                $('body').scrollTo($prev, 1000);
                $current.removeClass('current');
                $prev.addClass('current');
            }
        } else {
            $next = $current.next();
            
            if ($next.length) {
                $('body').scrollTo($next, 1000);
                $current.removeClass('current');
                $next.addClass('current');
            }
        }
                                         
        event.preventDefault();
    }