时间戳

首页 > 解决方案 > 移动导航菜单仅在 Windows 上创建额外的空间和滚动条

html - 移动导航菜单仅在 Windows 上创建额外的空间和滚动条

问题描述

单击移动菜单时，页面右侧会出现额外的空间，从而导致出现水平滚动条。

似乎width: 100vw;第 126 行导致了问题，但更改此设置也会更改菜单项的大小。

在调查了这个问题后，我发现它只出现在 Windows 上而不出现在 Mac 上（在 Firefox 和 chrome 中测试）。

密码笔

const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];

toggleButton.addEventListener("click", () => {
  navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.3125rem;
  line-height: 1.6;
  background-color: #e8e8e8;
}

.navbar {
  background-color: #333;
  color: #fff;
  margin-bottom: 1.5rem;
}

.container-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  width: 80%;
  margin: 0 auto;
  max-width: 1440px;
}

.nav-logo {
  font-size: 1.5rem;
  margin: 0.5rem;
}

.nav-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  padding: 1rem;
  display: block;
  font-size: 1rem;
}

.nav-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
}

.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1440px;
  background-color: #fff;
  padding: 2rem;
  margin-bottom: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  /* NAV */
  .toggle-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .nav-links {
    display: none;
    /* width: 100vw; */
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    /* justify-items: first baseline; */
  }
  .container-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
  }
  .nav-links ul {
    flex-direction: column;
  }
  .nav-links li {
    text-align: center;
    width: 100vw;
  }
  .nav-links li a {
    padding: 0.5rem 1rem;
  }
  .nav-links.active {
    display: flex;
  }
  /* NAV END*/
  .container {
    width: 100%;
    margin: 0 auto;
    max-width: 1440px;
    background-color: #fff;
    padding: 2rem;
    margin-bottom: 1rem;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/style/style.css" />
  <script src="/scripts/navbar.js" defer></script>
  <title>test</title>
</head>

<body>
  <nav class="navbar">
    <div class="container-nav">
      <div class="nav-logo">test</div>
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="nav-links">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="">
    <div class="container row">
      <h2 class="section-title">container 1</h2>
      <p>
        Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
      </p>
    </div>
  </section>

  <section class="">
    <div class="container row">
      <h2 class="section-title">container 2</h2>
      <p>
        Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
      </p>
    </div>
  </section>
</body>

</html>

标签： htmlcssresponsive-design

解决方案

为什么会这样？

发生这种情况的原因是因为100vw是视口的全宽，但是您的页面有一个垂直滚动条，所以可用宽度实际上是“视口宽度 - 滚动条宽度”。（如果您从页面中删除内容以使没有垂直滚动条，则不会出现水平滚动）。

例如，如果视口宽度为 600 像素，滚动条为 24 像素，则 100vw 为 600 像素，但菜单项的实际空间仅为 576 像素（600 像素 - 24 像素），从而导致滚动条。

如何解决？

100vw在 CSS 布局中真正必要的情况很少见——100%通常更可取，因为它占用了其容器 100% 的可用空间。因此，我们只需要确保您的每个菜单选项的容器也都设置正确。在您的情况下，您只需对@media (max-width: 600px)查询中的 CSS 进行一些更改：

.nav-links {
   width: 100%;     /* change from 100vw; */
}
.nav-links li {
  width: 100%;      /* change from 100vw; */
}
.nav-links.active {
  display: block;   /* change from flex (it isn't needed and just affects the display) */
}
.container-nav {
  width: 100%;      /* this was 80% for some reason? */
}

工作示例

（请注意，我已将媒体查询更改为@media (max-width: 800px)下方，因此我们可以在片段窗口中看到下拉菜单，而无需调整屏幕大小）

const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("nav-links")[0];

toggleButton.addEventListener("click", () => {
  navbarLinks.classList.toggle("active");
});
/****************************
PAGE STYLES
***************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.3125rem;
  line-height: 1.6;
  background-color: #e8e8e8;
}

.navbar {
  background-color: #333;
  color: #fff;
  margin-bottom: 1.5rem;
}

.container-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  width: 80%;
  margin: 0 auto;
  max-width: 1440px;
}

.nav-logo {
  font-size: 1.5rem;
  margin: 0.5rem;
}

.nav-links ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-links li {
  list-style: none;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  padding: 1rem;
  display: block;
  font-size: 1rem;
}

.nav-links li:hover {
  background-color: #555;
}

.toggle-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  width: 30px;
  height: 21px;
}

.toggle-button .bar {
  height: 3px;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
}

.container {
  width: 80%;
  margin: 0 auto;
  max-width: 1440px;
  background-color: #fff;
  padding: 2rem;
  margin-bottom: 1rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 800px) {
  /* NAV */
  .toggle-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .nav-links {
    display: none;
     width: 100%; 
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    /* justify-items: first baseline; */
  }
  .container-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
  }
  .nav-links ul {
    flex-direction: column;
  }
  .nav-links li {
    text-align: center;
    width: 100%;
  }
  .nav-links li a {
    padding: 0.5rem 1rem;
  }
  .nav-links.active {
    display: block;
  }
  /* NAV END*/
  .container {
    width: 100%;
    margin: 0 auto;
    max-width: 1440px;
    background-color: #fff;
    padding: 2rem;
    margin-bottom: 1rem;
  }
}
<nav class="navbar">
    <div class="container-nav">
      <div class="nav-logo">test</div>
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="nav-links">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="">
    <div class="container row">
      <h2 class="section-title">container 1</h2>
      <p>
        Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
      </p>
    </div>
  </section>

  <section class="">
    <div class="container row">
      <h2 class="section-title">container 2</h2>
      <p>
        Felis donec et odio pellentesque diam volutpat. Aliquam purus sit amet luctus venenatis. Turpis in eu mi bibendum neque egestas congue quisque egestas. Pellentesque sit amet porttitor eget dolor morbi non.
      </p>
    </div>
  </section>

推荐阅读