28172 sujets

CSS et mise en forme, CSS3

[Résolu] Scroller deux éléments indépendamment

Bonsoir à tous
La page https://www.alma-musica.net/html/album/index1.php permet d'afficher les différents albums photos de l'association
Si on affiche un album comprenant beaucoup de photos, par exemple "Requiem de Cherubini" les deux éléments côte à côte disposent tous les deux d'une barre de navigation verticale.
Si on scrolle dans la partie gauche, cela n'a pas d'effet sur la partie droite
Par contre si on scrolle dans la partie droite, c'est toutes la page qui scrolle.
Que dois-je faire pour que chaque partie scrolle indépendamment?
Merci de votre aide
Modérateur
Et l'eau, 


#album-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 12em;
    background: lightyellow;
    overflow-y: scroll;
    overflow-x: visible;
    padding: 1em 0.5em 0;
    z-index: 50;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100vh;
    overflow-y: auto;
    margin-left: 12em;
}

* code débogué dans une console
Modifié par niuxe (17 Jan 2020 - 21:04)
Merci de ta réponse je regarde demain
Edit: en fait j'ai préféré regarder avant de me coucher
C'est lumineux! Merci
Modifié par PapyJP (17 Jan 2020 - 23:20)
Dans cette solution, on a en gros une page scrollable et un menu scrollable en fixed par dessus, ce n'est pas <main> qui est scrollable indépendamment de <nav>.
La structure de la page telle que je pense la faire à terme est quelque chose comme

<body>
  <div id="container"> 
    <!-- pour limiter la largeur sur les très grands écrans -->
    <nav><!-- menu vertical scrollable --></nav>
    <main>
      <header>
        <!-- contient des commandes en mode édition -->
      </header>
      <figure class="album">
        <figcaption>
          <!-- titre de l'album -->
        </figcaption>
        <figure class="images">
          <!-- contient les images, scrollable -->
        </figure>
      </figure>
    </main>
  </div>
</body>

Dans ce modèle, ce n'est pas toute la page qui devrait être scrollée, mais uniquement la balise <figure class="images">
upload/1579340511-48769-album-page.png
Comment faire ça ?
Modifié par PapyJP (18 Jan 2020 - 10:41)
Pour que <figure class="images"> puisse scroller, il faut lui donner une hauteur max explicite. C'est ça le véritable problème. Pour l'instant j'ai mis

figure.images{
	flex:1;
	overflow-y: auto;
}

Mais flex:1 signifie min-height:tout ce qui reste dans le parent, mais quid de max-height ?
Modifié par PapyJP (18 Jan 2020 - 11:47)
niuxe a écrit :
As tu un exemple probant ? Parce que là je vois pas

Toujours la même page: https://www.alma-musica.net/html/album/index1.php afficher un album avec beaucoup de photos,par exemple "Week-end à la mer 2011"
Par rapport à mon précédent message, les photos sont dans <figure class="photos"> et non "images"
Modifié par PapyJP (20 Jan 2020 - 11:38)
Modérateur
Hello,

Rapidement, je vois deux solutions:

La première en ajoutent un container autour de `header` et `figcaption` et garder un autre container pour le contenu. Dans un container flex: 
.header-container{
  flex-grow: 0;
  flex-shrink: 0;
}

.images-container{
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
}


Mais j'amagine que tu ne veux pas toucher à l'HTML, du coup…

…la seconde solution, en utilisant simpelement `position: sticky`… Un petit problème si tu ne touche pas à l'HTML est qu'il faut calculer en JS le top de figcaption.
Merci de ta réponse
Je peux toucher autant que je veux au HTML, c'est moi qui le génère, donc pas de problème
Dans le cas présent il n'y a pas de <header> car le <header> ne sert qu'en mode administration pour contenir les boutons d'édition.
Le HTML est 

<body>
  <div id="container">
    <nav>...</nav>
    <main>
      <figure class="album">
        <figcaption>...</figcaption>
        <figure class="photos">...</figure>
      </figure>
    </figure>
  </main>
</div>
</body>

Il n'y a qu'un seul figure.album affiché, il y en a d'autres en display:none, correspondant aux albums qui ont déjà été ouverts au cours de la navigation.
Il y a deux moyens simples de traiter le problème:
1) laisser les choses en l'état (ce que je vais faire faute de mieux)
2) fixer une valeur max-height pour figure.photos ce qui est facile à faire en JavaScript
Il me semble étonnant qu'il n'y ait pas de solution CSS à un problème qui semble a priori trivial.
Modifié par PapyJP (20 Jan 2020 - 12:41)
Modérateur
Et bien si j’ai bien compris, dans ce cas il me semble que simplement 

figcaption{
  position: sticky;
  top: 0;
}

Devrait faire l’affaire
Modifié par Yordi (20 Jan 2020 - 22:56)
Bien sûr, mais ce n’est pas ce que j’essaie de faire.
Mon but avec cette exercice c’est de comprendre le fonctionnement des flexbox.
La doc dit que le dernier item prend "toute la place restante dans son parent". Ce que j’ai fait donne comme résultat "au moins toute la place restante".
Ou bien je me suis trompé dans l’écriture du CSS, ou bien j’ai compris la spec de travers et je voudrais en avoir le cœur net.
Il se trouve que dans ce cas ce n’est pas très important, mais j’ai besoin de savoir pour des utilisations futures.
Jean-Pierre-Bruneau a écrit :
Voila grace a cette version je suis arrivé à faire ton scrolling Smiley cligne

Merci. J’ai passé la journée à l’hosto. Je regarde demain
J'ai regardé ton code: le scroll est obtenu comme toujours par un max-height sur le conteneur d'images, ce que j'espérais pouvoir éviter.

La question qui me préoccupe est la suivante:
Soit un conteneur avec

figure.album{
    display:flex;
    flex-direction: column;
}

Son contenu va donc être une suite de boîtes superposées
La dernière boîte est

figure.photos {
    flex:1;
    overflow-y: auto;
}

d'après la doc flex:1 signifie que cette boîte occupe tout l'espace restant
Cela semble dire que la hauteur de figure.photos est la hauteur restante de figure.album
et donc que si ce qu'on met dedans déborde il devrait y avoir une barre de scroll.

Ou bien le CSS que j'ai écrit comporte une erreur, ou bien le comportement de flex:1 n'est pas d'affecter tout l'espace restant mais au moins tout l'espace restant ce qui n'est pas du tout la même chose.

Pour faire la présentation que l'on désire, la technique est toujours la même: utiliser du "JavaScript de présentation". Au fil du temps il est devenu de moins en moins nécessaire d'utiliser cette technique, et j'espérais que le module flexbox, relativement récent, contenait une propriété correspondant à ce besoin.
Écrire quelques lignes de JavaScript n'est pas un problème, mais je veux être sûr d'avoir bien compris le fonctionnement de flexbox dans ce domaine.
Modérateur
PapyJP a écrit :

Ou bien le CSS que j'ai écrit comporte une erreur, ou bien le comportement de flex:1 n'est pas d'affecter tout l'espace restant mais au moins tout l'espace restant ce qui n'est pas du tout la même chose.

Bonjour, en l’occurrence là n'est pas vraiment la question. Dans le flux HTML la verticalité est infinie, pour avoir un espace restant il faut fixer d'une manière ou d'une autre la taille du parent, que ce soit en absolu ou en relatif.
Meilleure solution
kustolovic a écrit :

Bonjour, en l’occurrence là n'est pas vraiment la question. Dans le flux HTML la verticalité est infinie, pour avoir un espace restant il faut fixer d'une manière ou d'une autre la taille du parent, que ce soit en absolu ou en relatif.

Ce qui est une autre façon de répondre à la question: flex:1 correspond à min-height:le reste de la balise parent et il n'y a pas de max-height implicite.
Et par ailleurs il ne semble pas y avoir un moyen de dire max-height = min-height.
Il faut donc le faire par JavaScript.
Merci de ta réponse, ça me semble clair.
Modifié par PapyJP (25 Jan 2020 - 15:01)
Sujet clos
Aller à