Le titre est réécrit comme suit : Comment obtenir l'effet de défilement de la fonction de collage du bas ?

Question

J'essaie d'obtenir un effet similaire à ce que je vois ici

Mais le contenu de chaque section doit également pouvoir défiler, c'est-à-dire qu'il ne sera corrigé que lorsqu'il atteindra le bas de la section.

Par exemple, lorsque le contenu est 200vh, comme ceci :

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>

Comme vous pouvez le voir, les parties 1 et 2 sont épinglées en haut et nous ne pouvons pas faire défiler pour voir leurs photos.

Mais la dernière partie fonctionne parfaitement.

Alors, comment puis-je obtenir cet effet ? Idéalement, utilisez du CSS pur, mais je suis également ouvert aux solutions JavaScript.

Answer 1

J'ai trouvé une solution ! Configurez-le avec une ligne de code en 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>

Mais je ne suis pas sûr que cela fonctionnera si la fenêtre est redimensionnée
Mais vous pouvez toujours utiliser onresize pour gérer cette situation

Suis-je toujours ouvert aux solutions CSS pures, le cas échéant ?