JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/brandonaaron/jquery-mousewheel/raw/master/jquery.mousewheel.js"></script>
<div id="menu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
    </ul>
  </div>

CSS

html { min-height: 1000px; }

#menu{
    overflow: auto;
    width: 200px;
    height: 100px;
    background: black;
    color: white;
    margin-top: 200px;
}

JavaScript

var menu = $('#menu')
    
menu.on('mousewheel', function(e, d) {
    if((this.scrollTop === (menu[0].scrollHeight - menu.height()) && d < 0) || (this.scrollTop === 0 && d > 0)) {
        e.preventDefault();
    }
});