J'essaie de comprendre comment faire défiler un côté d'une page. Un exemple serait quelque chose comme https://shop.luxonis.com/. La solution que j'ai trouvée consistait à styliser la colonne de droite en tant que telle
.right-column {
overflow-y: scroll;
height: 100vh;
}
Mais cela fait que la page a deux molettes de défilement. Des idées? Je sais que le site que j'ai donné utilise la position collante, mais je ne sais pas quoi d'autre.
Merci!
Solution du problème
Vous pouvez utiliser position: stickypour le panneau de gauche
Voici la cour de récréation
.main {
width: 100%;
height: 100%;
}
.header {
height: 2rem;
background-color: orange;
}
.flexbox {
display: flex;
}
.left-panel {
position: sticky; /* Set the element to become sticky */
height: 100vh;
width: 50%;
background-color: red;
top: 0; /* Set the sticky positon top */
}
.right-panel {
height: 1000rem;
width: 50%;
background-color: blue;
}
.footer {
height: 5rem;
background-color: yellow;
}<div class="main">
<div class="header">
</div>
<div class="flexbox">
<div class="left-panel">
Content
</div>
<div class="right-panel">
Scrolling content
</div>
</div>
<div class="footer">
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire