Défilement de la moitié de la page avec butée

Signaler
-
 Toumax -
Bonjour à tous,

J'ai actuellement deux sections (chacune occupant environ 50% de la largeur de l'écran). La première section comporte du texte, la seconde des images. La section de texte est plus courte que celle des images. J'aimerais, lorsque l'on descend sur la page, une fois arrivée au bout du texte, que seule la section des images scrolle et que le texte lui reste figé.

Je vous mets un lien vers une illustration:

https://ibb.co/BLjxfj7

Ce que j'aimerais c'est pouvoir défiler sur la partie de droite, pour visualiser complétement les images 5 et 6, et découvrir l'image 7 (références à l'illustration ci-dessus). Et que le texte lui reste comme sur l'image. (Le gris en arrière-plan représente le viewport.) Il y a aussi des images et du texte au dessus, qui jusqu'ici défilaient ensemble, simultanément.

Je vous mets à titre indicatif la structure de mon html, et puis, plus important, ce que j'ai mis en css pour le moment.

Peut-être que les seules solutions seront en jquery... ?

D'ores et déjà merci pour votre aide!

<main>
 <section>
  <article>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
  </article>
 </section>
 <section>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
 </section>
 </main>


main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

1 réponse

Salut,
vous pouvez voir avec
position : fixed; 
si cela peut correspondre à ce que vous voulez.
Ou simplement mettre vos images dans un container(HTML) qui aura la barre de défilement actif tandis que vous n'en mettez pas pour le texte.
Je ne sais pas si ça correspond à ce que vous voulez mais ça me semble s'en approcher(voir la propriété CSS 'overflow').
Sinon en effet il faudra passer par la programmation , c'est à dire JavaScript.

Pour respecter HTML il me semble aussi que si l'image/les images est/sont associée au texte il faudrait les mettre dans le même élément (section ou article) ce qui ne vous empêche pas d'ajouter une séparation pour la mise en page.
Le fait d'avoir différentes sections indique (référencement/accessibilité/hiérarchie) que ce sont deux éléments/sections/articles séparés et sans liens.

un exemple que je n'ai pas testé mais qui se rapproche dans le principe(je met le CSS dans l'attribut style pour condenser pour l'exemple):

<section>
<article>
<h2>Titre de la section</h2>
<p style="width:50%;overflow:hidden;">texte principal</p>
<article style="width:50%;overflow:scroll;">
<!-- attention à tenir compte des marges 50%+50%>100% si on compte les marges
à adapter aussi bien sûr selon la mise en page voulue, par exemple en changeant le display pour qu'il soient côte à côte
-->
<h3>les images et leurs légendes</h3>
<figure>
   <img/>
   <figcaption></figcaption>
  </figure>
...
</article><!-- fin de la partie des images qui est liée au texte de la section-->

</article><!-- fin de l'article qui contient texte et images-->
</section><!-- fin de la section qui réunit texte et images avec leur légendes--->