所以我想从这个网站实现滚动效果：https://livingbeautyinc.com/
但问题是我希望它只发生在它的特定部分，而不是整个页面。
例如在下一页：https://codepen.io/Rafael-Sampaio-the-selector/pen/yLrpBRV
`<!DOCTYPE html>
<html>
<head>
<title>Random BS</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<h1 style="margin-top: 0;">
Poyo
</h1>
<p>Lorem ipsu... </p>
<p>Lorem ipsu... </p>
<p>Lorem ipsu... </p>
</div>
<div class="container-2">
<p>Paya </p>
<h2 style="margin-top: 0; position: absolute; bottom: 0; right: 0;">
Service
</h2>
</div>
<div class="container-3">
<h1 style="margin-top: 0; color: wheat; position: relative; top: 300px; left: 500px;">
Random text
</h1>
</div>
<div class="container-4">
<h1 style="margin-top: 0;">
Yet more random text
</h1>
</div>
<div class="container-5">
<h1 style="margin-top: 0;">
Once again random text
</h1>
</div>
</body>
</html>`
`html, body{
margin: 0;
height: 100%;
}
div{
height: 100%;
}
.container-2{
background-color: antiquewhite;
}
.container-3{
background-color: black;
}
.container-4{
background-color: red;
}
.container-5{
background-color: blue;
}`
我希望将效果应用到container-2、container-3和container-4上，但其他两个不受影响并正常滚动。我该如何去做呢？
我尝试按照这个问题的答案建议进行操作：滚动效果 - 滚动 CSS 时使组件彼此堆叠
但这仅在您将效果应用于整个页面时才有效，在特定部分上执行只会破坏布局，除此之外几乎没有什么。
您可以使用位置 sticky 来实现该效果：
//this code generate the HTML (10 container)
let HTML = "";
for (var i = 0; i < 10; i++){
HTML += `
<div class="container">
<h1> Poyo N°` + i + `</h1>
<p>Lorem ipsu... </p>
<p>Lorem ipsu... </p>
<p>Lorem ipsu... </p>
</div>
`;
}
document.querySelector("#wrapper").innerHTML = HTML;.container{
/* We use 100 Dynamic Viewport Units to take the full screen height
Learn more about that here https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
*/
min-height : 100dvh;
position : sticky;
top : 0;
}
/*
THE CSS BELOW IS FOR THIS CODE SNIPPET ONLY
*/
body, h1{
margin : 0;
padding : 0;
}
section{
background-color : gray;
outline : 1px solid blue;
min-height : 100dvh;
}
.container:nth-child(1n){
background-color : green;
}
.container:nth-child(2n){
background-color : red;
}
.container:nth-child(3n){
background-color : blue;
}<section class="regular">
<h1>Regular section 1 </h1>
</section>
<section class="regular">
<h1>Regular section 2 </h1>
</section>
<section class="sticky">
<div id="wrapper"></div>
</section>
<section class="regular">
<h1>Regular section 3</h1>
</section>
<section class="regular">
<h1>Regular section 4</h1>
</section>