Question

我使用全屏叠加导航来显示一些细节。我使用了w3schools中记录的全屏覆盖导航内容 - How TO - Full screen Overlay Navigation。全屏导航工作正常，但问题在于滚动。让我们说当我们鼠标滚动鼠标时，主页面正在滚动。如果我们有覆盖导航页面的滚动条，当它到达滚动的末尾时，我们可以注意到主页面开始滚动。我已经制作了一个JSFiddle来展示这个问题。

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

任何人都可以告诉我一些解决方案吗

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

滚动Overlay Navigation页面时阻止主页面滚动

1 个答案: