JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="wrap">
    <ul>
        <li>list item 0</li>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
        <li>list item 6</li>
        <li>list item 7</li>
        <li>list item 8</li>
        <li>list item 9</li>
        <li>list item 10</li>
        <li>list item 11</li>
        <li>list item 12</li>
        <li>list item 13</li>
        <li>list item 14</li>
        <li>list item 15</li>
        <li>list item 16</li>
        <li>list item 17</li>
        <li>list item 18</li>
        <li>list item 19</li>
        <li>list item 20</li>
        <li>list item 21</li>
        <li>list item 22</li>
        <li>list item 23</li>
        <li>list item 24</li>
        <li>list item 25</li>
        <li>list item 26</li>
        <li>list item 27</li>
        <li>list item 28</li>
        <li>list item 29</li>
    </ul>
</div>

CSS

div {
    width: 80%;
    height: 200px;
    border: 2px solid #000;
    border-radius: 1em;
    margin: 1em auto 0 auto;
    overflow: hidden;
}

JavaScript

var div = $('#wrap'),
    wrapHeight = div.height(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove',
            function(e){
                var cPointY = e.pageY,
                    cST = div.scrollTop();
                if (cPointY >= (wrapHeight/2)) {
                    div.scrollTop(cST + 15);
                }
                else {
                    div.scrollTop(cST - 15);
                }
            });