GOOGLE ADS

mardi 3 mai 2022

Défilement vertical d'une page latérale

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

Comment utiliseriez-vous .reduce() sur des arguments au lieu d'un tableau ou d'un objet spécifique&nbsp;?

Je veux définir une fonction.flatten qui aplatit plusieurs éléments en un seul tableau. Je sais que ce qui suit n'est pas possible, mais...