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'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY,
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});