移动导航菜单仅在 windows 上创建额外的 space 和滚动条
Mobile nav menu creates extra space and scroll bar on windows only
点击移动菜单后，额外的 space 出现在页面右侧，导致出现水平滚动条。
问题似乎是第 126 行的 width: 100vw; 引起的，但更改此设置也会更改菜单项的大小。
调查这个问题后我发现它只出现在 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>
为什么会这样？
发生这种情况的原因是因为 100vw 是视口的 完整 宽度，但您的页面有一个垂直滚动条，因此 可用 宽度实际上是“视口宽度-滚动条宽度”。 （如果你把页面内容删掉，垂直滚动条就没有了，水平滚动条就不会出现了）。
例如，如果视口宽度为 600px，滚动条为 24px，则 100vw 为 600px，但菜单项的实际 space 仅为 576px（600px - 24px），导致滚动酒吧.
如何解决？
很少有 100vw 在 CSS 布局中真正需要 - 100% 通常更可取，因为它占用了 100% 的 可用 space 其容器。所以我们只需要确保您的每个菜单选项的容器也设置正确。在您的情况下，您只需对 @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)，因此我们可以在代码段 window 中看到此处的下拉菜单，而无需调整屏幕大小）
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>
点击移动菜单后，额外的 space 出现在页面右侧，导致出现水平滚动条。
问题似乎是第 126 行的 width: 100vw; 引起的，但更改此设置也会更改菜单项的大小。
调查这个问题后我发现它只出现在 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>
为什么会这样？
发生这种情况的原因是因为 100vw 是视口的 完整 宽度，但您的页面有一个垂直滚动条，因此 可用 宽度实际上是“视口宽度-滚动条宽度”。 （如果你把页面内容删掉，垂直滚动条就没有了，水平滚动条就不会出现了）。
例如，如果视口宽度为 600px，滚动条为 24px，则 100vw 为 600px，但菜单项的实际 space 仅为 576px（600px - 24px），导致滚动酒吧.
如何解决？
很少有 100vw 在 CSS 布局中真正需要 - 100% 通常更可取，因为它占用了 100% 的 可用 space 其容器。所以我们只需要确保您的每个菜单选项的容器也设置正确。在您的情况下，您只需对 @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)，因此我们可以在代码段 window 中看到此处的下拉菜单，而无需调整屏幕大小）
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>