javascript - 我的侧导航仍然在右侧可见

Question

我正在为移动视图制作侧面导航，每当单击汉堡包图标时导航就会滑入，问题是当导航隐藏时，当您向右滚动时它仍然可见，我尝试溢出隐藏但没有任何效果。

我试图通过将导航向左移动 100% 来隐藏导航，并且它以左 0 滑入。

另一个问题是导航下方的内容是可滚动的，您可以离开导航向下移动。

我试图尽可能简化 css。

这是我的代码：

document.querySelector('.hamburger').addEventListener('click', function() {
  document.querySelector('.side-nav').classList.toggle('is-open');
})

body {
  margin: 0;
  box-sizing: border-box;
  height: 2000px;
}

header {
  background-color: black;
  width: 100%;
  height: 65px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow-x: hidden;
}

.hamburger {
  width: 50px;
  height: 40px;
  position: relative;
  margin: 5px 20px;
  cursor: pointer;
}

.hamburger span {
  height: 2px;
  border-radius: 2px;
  width: 100%;
  background-color: white;
  position: absolute;
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 10px;
}

.hamburger span:nth-child(3) {
  top: 20px;
}

.side-nav {
  position: absolute;
  top: 65px;
  left: 100%;
  width: 100%;
  background-color: aqua;
  height: calc(100vh - 65px);
  transition: left .15s;
}

.is-open {
  left: 0;
  transition: left .15s;
}

<header>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <nav class="side-nav">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>More</li>
    </ul>
  </nav>
</header>

标签： javascripthtmlcss

Answer 1

您必须添加overflow: hidden到父级以隐藏部分之外的元素。最好的方法是添加.wrapper容器以将所有元素包装在body标签内并添加overflow: hidden到其中。（您可以尝试将其添加到body，但我不建议这样做）。

此外，不要转换left，因为这会降低您的应用程序/网站的性能。改为使用transform: translateX(100%);将其向左移动 100% 并在.is-open添加类时返回到 0%。这是一篇关于 CSS 过渡的好文章。

所以通过一些调整，它看起来像这样：

document.querySelector('.hamburger').addEventListener('click', function() {
  document.querySelector('.side-nav').classList.toggle('is-open');
})

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  box-sizing: border-box;
  height: 2000px;
}

header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 65px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.wrapper {
  overflow: hidden;
  min-height: 100vh;
}

.hamburger {
  width: 50px;
  height: 40px;
  position: relative;
  margin: 5px 20px;
  cursor: pointer;
}

.hamburger span {
  height: 2px;
  border-radius: 2px;
  width: 100%;
  background-color: white;
  position: absolute;
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 10px;
}

.hamburger span:nth-child(3) {
  top: 20px;
}

.side-nav {
  position: absolute;
  top: 65px;
  left: 0;
  transform: translateX(100%);
  width: 100%;
  background-color: aqua;
  height: calc(100vh - 65px);
  transition: transform .15s;
}

.is-open {
  transform: translateX(0%);
}

<div class="wrapper">
  <header>
    <div class="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <nav class="side-nav">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>More</li>
      </ul>
    </nav>
  </header>
</div>