How to add overflow: hidden to body when input:checked?

Question

css

Here is the CSS

input,  ul.hamburger {
    display: none;
}
label {
    position: relative;
    display: block;
    cursor: pointer;
}
input:checked ~ ul.hamburger {
    display: block;
}
.burger {
position: fixed;
top:0;
left:0;
}
.fullscreen {
position: fixed;
background: #fff;
width: 100vw;
height: 100vh;
}

Here is the HTML

<input  id="menu" type="checkbox" name="menu" />
<label class="burger" for="menu">иконка</label>
<ul class="fullscreen">
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
</ul>

This is how full-screen navigation is implemented. Click on the icon - a menu appears.
There are many links, there is scrolling. How can I add overflow: hшdden for the body when clicking on the icon, and scrolling was only in the menu, respectively?

Answer 1

If you want without scripts - why not make the menu 100% height and width, but twist inside it

Answer 2

JS only.