JSFiddle - React, Tailwind, and code Playground

HTML

<span class="toto">0</span> - <span class="toto2">0</span>
<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>
<div id="wrap2">
    <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#wrap, div#wrap2 {
    width: 80%;
    height: 150px;
    border: 2px solid #000;
    border-radius: 1em;
    margin: 1em auto 0 auto;
    overflow: hidden;
}
.toto2 {
    background-color: #f00;
}

JavaScript

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

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

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

div2.on('mousemove',
            function(e){
                var cPointY = e.pageY - div2.offset().top,
                    cST = div2.scrollTop();
                $('.toto2').html(cPointY)
                if (cPointY >= (wrapHeight/2)) {
                    div2.scrollTop(cST + 15);
                }
                else {
                    div2.scrollTop(cST - 15);
                }
            });