滚动捕捉和滚动整页
Posted
技术标签:
【中文标题】滚动捕捉和滚动整页【英文标题】：scroll snap and scroll full page 【发布时间】：2021-12-10 06:12:43 【问题描述】：当我滚动页面时，滚动捕捉属性有效，但我单击主页或导航栏中的联系人不起作用？如果我删除了我的 .container 类高度属性或 .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" 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>【问题讨论】：
【参考方案1】：我只是在 codepen 中使用您的代码并删除了整个 js 我不知道如何但现在它可以按照您的意愿工作?♂️ here 也可以在 sn-p 中工作。
我做了一些小改动，比如在* 类中添加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" 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>全屏运行 sn-p。
【讨论】：
是的，我知道如果我删除了它工作正常的脚本，但与此脚本相比，它计算持续时间值和距离值，因此与正常滚动行为相比更平滑：平滑；我的问题是为什么两者都不能正常工作。以上是关于滚动捕捉和滚动整页的主要内容，如果未能解决你的问题，请参考以下文章