Der Titel wird wie folgt umgeschrieben: Wie erreicht man den Scrolleffekt der unteren Einfügefunktion?

Question

Ich versuche einen ähnlichen Effekt zu erzielen, wie ich ihn hier sehe

Aber der Inhalt jedes Abschnitts sollte auch scrollbar sein, d. h. er wird erst fixiert, wenn er das Ende des Abschnitts erreicht.

Wenn der Inhalt beispielsweise 200vh ist, so:

section {
  position: sticky;
  top: 0;
  height: 200vh;
}

section img{
  width:100%;
  height:100%
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}

<section>
    <img src="https://picsum.photos/id/128/800/300" alt="">
</section>

<section>
    <img src="https://picsum.photos/id/48/800/300"alt="">
</section>

<section>
    <img src="https://picsum.photos/id/42/800/300" alt="">
</section>

Wie Sie sehen können, sind Teil 1 und 2 oben angepinnt und wir können nicht scrollen, um ihre Fotos zu sehen.

Aber der letzte Teil funktioniert perfekt.

Wie erreiche ich diesen Effekt? Idealerweise verwende ich reines CSS, ich bin aber auch offen für JavaScript-Lösungen.

Answer 1

我找到了一个解决方案！使用JavaScript中的一行代码来设置top

document.querySelectorAll(".item").forEach((el)=>{ el.style.top=(document.documentElement.clientHeight - el.offsetHeight)+"px" });

section{
  position:sticky;
  width:100%;
  height:200vh;
}

img{
  object-fit:cover;
  height:100%;
  width:100%;
}

<section class="item">
 <img src="https://picsum.photos/id/128/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/48/800">
</section>

<section class="item">
  <img src="https://picsum.photos/id/42/800">
</section>

虽然我不确定如果窗口被调整大小是否会起作用
但你可以始终使用onresize来处理这种情况

如果有的话，我仍然可以接受纯CSS解决方案？