5546 sujets

Sémantique web et HTML

Afficher deux barres scrolls sur page divisée en deux

Hello !
C'est hyper bête mais pas moyen de trouver une solution. J'ai une page divisé en deux partie et je voudrais avoir un scroll qui apparait pour chacun d'en elle.

j'ai fait un codepen mais c'est pas le comportement de scroll normal qu'aurait le scroll sur un navigateur (et le webkit n'apparait pas non plus), mais quand même : https://codepen.io/lucie-lucie/pen/BarVExZ

Any idea ?? Merci !!




html, body {height: 100%; overflow-y: scroll; }
.partiegauche{padding:20px; height: 100%; background-color: white; }
.partiedroite{position: fixed; top: 0; left:50%; width:50%; height:100%; overflow:auto; padding:20px; background-color:#EAECEE;}
.marges {margin-top:20px; margin-right:40px; margin-left:20px; }
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-thumb {border-radius: 10px;background:grey;-webkit-box-shadow: inset 0 0 6px white;}





<!-- MENU PARTIE GAUCHE --><div class="partiegauche">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br></div>

<!-- CONTENT PARTIE DROITE --><div class="partiedroite"><div class="marges">
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div></div><!-- CONTENT PARTIE DROITE -->
J'ai tout essayé, le seul moyen de la faire apparaitre c'est de faire 

direction: rtl;


Mais ça m'arrange pas du tout, ça inverse tout mes paragraphes (et la scrollbar s'affiche du coté inversé du coup).

C'est incompréhensible, ça veut bien dire qu'il peut y en avoir une mais aucun moyen de l'afficher autrement (webkit ; overflow-y ; scrollbar et j'en passe)
Bonjour,

Je pense que vous voulez quelque chose comme ceci : CodePen

Je l'ai conçu responsive, au-dessous d'une certaine largeur les colonnes reviennent l'une au-dessous de l'autre, sans scroll.

Le CSS interprété :
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  margin: 0;
  line-height: 1.5;
  font-family: Arial;
}
.test > div {
  padding: 1em;
}
@media (min-width: 35.01em) {
  .test {
    display: flex;
  }
  .test > div {
    width: 50%;
    height: 100vh;
    overflow-y: scroll;
  }
}
.test > :first-child {
  background-color: #ffa500;
}
.test > :last-child {
  background-color: #d2b48c;
}
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à