JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
  <button onclick="freeze()">Freeze body</button>
  <button onclick="unfreeze()">Unfreeze body</button>
</div>

<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>
...

CSS

#buttons {
  position: fixed;
  background: yellow;
  width: 100%;
  z-index: 1;
}

#buttons button {
  font: 15px verdana;
}

* {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

function freeze() {
  var top= window.scrollY;
    
  document.body.style.overflow= 'hidden';

  window.onscroll= function() {
    window.scroll(0, top);
  }
}

function unfreeze() {
  document.body.style.overflow= '';
  window.onscroll= null;
}