Javascript 为什么垂直滚动条会卡在移动视图中？
在移动视图中，当我尝试垂直滚动时，网页被卡住。在Javascript 为什么垂直滚动条会卡在移动视图中？,javascript,html,css,mobile,vertical-scrolling,Javascript,Html,Css,Mobile,Vertical Scrolling,在移动视图中，当我尝试垂直滚动时，网页被卡住。在@媒体屏幕和（最大宽度：952px）{}中，我有溢出-x:hidden，宽度：100%和位置：绝对设置以防止水平滚动，因为移动导航栏隐藏在右侧。我试图添加overflow-y:scroll和溢出-y：自动添加到代码中，甚至添加了！重要信息，我仍然遇到垂直滚动问题 您可以在以下位置查看该网页的实时版本： “摄影”页面的HTML： <!DOCTYPE html> <html> <head> &
@媒体屏幕和（最大宽度：952px）{}溢出-x:hidden，宽度：100%和位置：绝对设置以防止水平滚动，因为移动导航栏隐藏在右侧。我试图添加overflow-y:scroll和溢出-y：自动添加到代码中，甚至添加了！重要信息
，我仍然遇到垂直滚动问题
您可以在以下位置查看该网页的实时版本：
“摄影”页面的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li><a href="index.html">Home</a></li> -->
<li><a href="photography.html">Photography</a></li>
<li><a href="graphic-design.html">Graphic Design</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
我认为您的问题在于，您的滚动设置@媒体屏幕和（最大宽度：952px）
同时针对html
和body
元素，这会导致滚动效果中出现滚动，在移动视图中可能会出现问题
我可以在inspector中通过删除html
将正文
样式移动到媒体查询之外，并将转换
行中的导航链接
样式从100%
更改为100vw
。在这种情况下，它们的工作原理应该是相同的，但是vw
（视口宽度）似乎工作得更好
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
@media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}
唯一的问题是它会导致水平滚动被启用，这允许您向右滚动，并在应该隐藏时看到空的移动导航栏。你知道为什么会这样吗？嘿，Jacki，我没有遇到水平滚动的问题，但是我更新了样式来表示我（刚才）尝试过的样式，只要你的代码与你部署的代码相同，这些样式就可以工作。我在我的帖子中更新了CSS以反映我现在的情况。我做了你提到的更改，这非常有帮助（谢谢！），但我仍然有一个水平滚动的问题-只有在手机上。它在桌面视图上没有这个问题。我肯定做错了什么，我就是不知道是什么。
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
@media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}