当我滚动页面时，滚动快照属性有效，但我单击主页或导航栏中的联系人不起作用？如果我删除了.conta容器类高度属性或.contentContainer类高度属性，它就起作用了，但滚动捕捉属性不起作用。我希望这两个都对我有用。
const navigationLink = document.querySelectorAll(".navbarSection a");
navigationLink.forEach((element) =>
element.addEventListener("click", navigationcontent)
);
function navigationcontent(event) {
event.preventDefault();
const attribute = event.currentTarget.getAttribute("href");
const targetPosition = document.querySelector(attribute).offsetTop;
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
const duration = 1000;
let start = null;
window.requestAnimationFrame(step);
function step(timestamp) {
if (!start) {
start = timestamp;
}
const progress = timestamp - start;
const aaa = window.scrollTo(
0,
distance * (progress / duration) + startPosition
);
if (progress < duration) window.requestAnimationFrame(step);
}
}* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
.conatiner {
background-color: aquamarine;
width: 100%;
height: 100vh;
}
img.logoImg {
width: 3em;
}
.navbarSection {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
height: 8vh;
background: lightgray;
padding: 1%;
font-size: 1.2rem;
position: fixed;
top: 1px;
width: 100vw;
z-index: 1;
}
ul {
display: flex;
}
li {
list-style-type: none;
margin-right: 4vw;
}
li a {
text-decoration: none;
font-family: sans-serif;
color: black;
font-weight: 500;
}
.contentContainer {
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
}
.contentContainer img {
width: 99vw;
height: 100vh;
}
.contentContainer section {
scroll-snap-align: start;
height: 100vh;
position: relative;
overflow-x: clip;
}
p {
color: black;
text-align: center;
display: flex;
position: absolute;
left: 50%;
top: 3%;
font-size: 2em;
font-family: emoji;
font-weight: 600;
transform: translateY(10em);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="conatiner">
<div class="navbarSection">
<span> <a href="#a"> <img class="logoImg" src="./src/logo.svg" alt="" srcset=""></a> </span>
<nav>
<div class="contentHeading">
<ul>
<li> <a href="#home">Home</a></li>
<li> <a href="#about">About</a></li>
<li> <a href="#service">Service</a></li>
<li> <a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<section class="contentContainer">
<section class="box1" id="a">
<p>Front Page</p>
</section>
<section class="box2" id="home">
<p>Home</p>
</section>
<section class="box3" id="about">
<p>About</p>
</section>
<section class="box4" id="service">
<p>Service</p>
</section>
<section class="box5" id="contact">
<p>Contact</p>
</section>
</section>
</div>
<script src="./script.js"></script>
</body>
</html>我只是在codepen中玩你的代码，并删除了整个js，我不知道怎么做，但现在可以随心所欲了♂️在这里，也在片段中工作。
我做了一些小的更改，比如在*{}类中添加scroll-behavior，这样你点击的任何链接都会以平滑的行为滚动，并从.container{}中删除height:100vh
* {
padding: 0%;
margin: 0%;
box-sizing: border-box;
scroll-behavior: smooth;
}
.conatiner {
background-color: aquamarine;
width: 100%;
}
img.logoImg {
width: 3em;
}
.navbarSection {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
height: 8vh;
background: lightgray;
padding: 1%;
font-size: 1.2rem;
position: fixed;
top: 1px;
width: 100vw;
z-index: 1;
}
ul {
display: flex;
}
li {
list-style-type: none;
margin-right: 4vw;
}
li a {
text-decoration: none;
font-family: sans-serif;
color: black;
font-weight: 500;
}
.contentContainer {
height: 100vh;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
}
.contentContainer img {
width: 99vw;
height: 100vh;
}
.contentContainer section {
scroll-snap-align: start;
height: 100vh;
position: relative;
overflow-x: clip;
}
p {
color: black;
text-align: center;
display: flex;
position: absolute;
left: 50%;
top: 3%;
font-size: 2em;
font-family: emoji;
font-weight: 600;
transform: translateY(10em);
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="conatiner">
<div class="navbarSection">
<span> <a href="#a"> <img class="logoImg" src="./src/logo.svg" alt="" srcset=""></a> </span>
<nav>
<div class="contentHeading">
<ul>
<li> <a href="#home">Home</a></li>
<li> <a href="#about">About</a></li>
<li> <a href="#service">Service</a></li>
<li> <a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="contentContainer">
<section class="box1" id="a">
<p>Front Page</p>
</section>
<section class="box2" id="home">
<p>Home</p>
</section>
<section class="box3" id="about">
<p>About</p>
</section>
<section class="box4" id="service">
<p>Service</p>
</section>
<section class="box5" id="contact">
<p>Contact</p>
</section>
</div>
</div>
</body>以全屏方式运行该片段。