JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top">
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
<li>text5</li>
<li>text6</li>
<li>text7</li>
<li>text8</li>
<li>text9</li>
<li>text10</li>
<li>text11</li>
<li>text12</li>
<li>text13</li>
<li>text14</li>
<li>text15</li>
<li>text16</li>
<li>text17</li>
<li>text18</li>
<li>text19</li>
<li>text20</li>
<li>text21</li>
<li>text22</li>
<li>text23</li>
<li>text24</li>
<li>text25</li>
<li>text26</li>
<li>text27</li>
<li>text28</li>
<li>text29</li>
<li>text30</li>
<li>text31</li>
<li>text32</li>
<li>text33</li>
<li>text34</li>
<li>text35</li>
<li>text36</li>
<li>text37</li>
<li>text38</li>
<li>text39</li>
<li>text40</li>
<li>text41</li>
<li>text42</li>
<li>text43</li>
<li>text44</li>
<li>text45</li>
<li>text46</li>
<li>text47</li>
<li>text48</li>
<li>text49</li>
<li>text50</li>
<li>text51</li>
<li>text52</li>
<li>text53</li>
<li>text54</li>
<li>text55</li>
<li>text56</li>
<li>text57</li>
<li>text58</li>
<li>text59</li>
<li>text60</li>
<li>text61</li>
<li>text62</li>
<li>text63</li>
<li>text64</li>
<li>text65</li>
<li>text66</li>
<li>text67</li>
<li>text68</li>
<li>text69</li>
<li>text70</li>
<li>text71</li>
<li>text72</li>
<li>text73</li>
<li>text74</li>
<li>text75</li>
<li>text76</li>
<li>text77</li>
<li>text78</li>
<li>text79</li>
<li>text80</li>
<li>text81</li>
<li>text82</li>
...
CSS
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
}
.cont {
width: 400px;
margin: auto;
}
JavaScript
$('.top').on('touchstart', function(event){
event.preventDefault();
})