오버레이 탐색 페이지를 스크롤하는 동안 기본 페이지 스크롤을 방지합니다.

Question

몇 가지 세부 정보를 표시하기 위해 전체 화면 오버레이 탐색을 사용했습니다. w3schools에 문서화 된 전체 화면 오버레이 탐색 자료 - How TO - Full screen Overlay Navigation을 사용했습니다. 전체 화면 탐색이 정상적으로 작동하지만 스크롤과 관련된 문제가 있습니다. 마우스를 마우스로 스크롤하면 메인 페이지에서 스크롤이 발생합니다. 오버레이 탐색 페이지 용 스크롤 막대가 있고 스크롤 끝 부분에 도달하면 메인 페이지가 스크롤되기 시작합니다. 문제를 선보일 JSFiddle을 만들었습니다.

function openNav() { 
    document.getElementById("mySidenav").style.width = "100%"; 
    document.getElementById("main").style.marginLeft = "100%"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft = "0"; 
} 

Working JSFiddle

사람이 프라 사드이

Answer 1

see the updated fiddle

function openNav() { 
    document.getElementById("mySidenav").style.width = "100%"; 
    document.getElementById("main").style.marginLeft = "100%"; 
    document.body.style.overflow = "hidden"; 

} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft = "0"; 
    document.body.style.overflow = "auto"; 
}