JSFiddle - React, Tailwind, and code Playground

HTML

<div id="is-touch"></div>
<br><br>
    
<div class="scrollable">
    <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>
        <li>item 11</li>
        <li>item 12</li>
        <li>item 13</li>
        <li>item 14</li>
        <li>item 15</li>
        <li>item 16</li>
        <li>item 17</li>
        <li>item 18</li>
        <li>item 19</li>
        <li>item 20</li>
        <li>item 21</li>
        <li>item 22</li>
        <li>item 23</li>
        <li>item 24</li>
        <li>item 25</li>
        <li>item 26</li>
        <li>item 27</li>
        <li>item 28</li>
        <li>item 29</li>
        <li>item 30</li>
        <li>item 31</li>
        <li>item 32</li>
        <li>item 33</li>
        <li>item 34</li>
        <li>item 35</li>
        <li>item 36</li>
        <li>item 37</li>
        <li>item 38</li>
        <li>item 39</li>
        <li>item 40</li>
        <li>item 41</li>
        <li>item 42</li>
        <li>item 43</li>
        <li>item 44</li>
        <li>item 45</li>
        <li>item 46</li>
        <li>item 47</li>
        <li>item 48</li>
        <li>item 49</li>
        <li>item 50</li>
    </ul>
</div>

CSS

.scrollable {
    height: 300px;
}

.no-touch .scrollable {
    position: relative;
    overflow: auto;
}

.touch .scrollable {
    overflow-y: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

JavaScript

var supportTouch = !!('ontouchstart' in window);

document.body.classList.add(supportTouch ? 'touch' : 'no-touch');

document.getElementById('is-touch').textContent = 'Is touch device: ' + supportTouch;