CODEWITHSUNDEEP
javascripthtmlcssnavigation
Alex Man
Alex Man

Reputation: 4886

preventing main page scroll while we scroll the Overlay Navigation page

I have used a Full screen Overlay Navigation for displaying some of the detail. I have used the Full screen Overlay Navigation stuff which is been documented in w3schools - How TO - Full screen Overlay Navigation. Full Screen Navigation is working fine but the problem is with the scrolling. Lets say when we mouse scroll the mouse, the scrolling is happening for the main page. If we have a scroll bar for the Overlay Navigation Page and when it reaches the end of the scroll, then we can notice the main page started to scroll. I have made a JSFiddle to showcase the issue.

Working 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";
}

Can anyone please tell me some solution for this

Upvotes: 1

Views: 38

Answers (1)

prasanth
prasanth

Reputation: 22500

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";
}

Upvotes: 1

Related Questions