how to disable scroll on sidenav

Question

i want to ask

i have a show hide menu (openNav, closeNav)

this my javascript :

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
    // document.getElementById("flipkart-navbar").style.width = "50%";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "rgba(0,0,0,0)";
}

and this my css script :

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    box-shadow: 0 4px 8px -3px #555454;
    padding-top: 0px;
}

i try to add overflow-y: hidden; but not work

i try to change the overflow:visible or auto not work to

i try to change the position to absolute or relative not work to sir

the scroll still show

this my screenshoot :

see the scroll bar from my screenshoot, the scroll bar show not hide or disable

how to hide or disable the scrollbar sir?

thanks before

Answer 1

you need to target the overflow body element in js. Below is the code:

function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
    // document.getElementById("flipkart-navbar").style.width = "50%";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
    document.body.style.overflow = "hidden";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.body.style.backgroundColor = "rgba(0,0,0,0)";
    document.body.style.overflow = "auto";
}

Answer 2

Try

overflow: hidden;
height:100vh;
width: 100vh;