Comment positionner une barre de défilement div sur le côté gauche?

Question

Est-il possible de spécifier une position (gauche ou droite) pour le placement d'une barre de défilement verticale sur un div ?

Par exemple regardez cette page qui explique comment utiliser l'attribut overflow. Existe-t-il un moyen de placer cette barre de défilement sur le côté gauche de la zone de défilement ?

Answer 1

Vous pouvez essayer direction:rtl; dans votre css. Ensuite, réinitialisez la direction du texte dans le div

 #scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

Non testé.

Answer 2

Exemple de travail : JSFiddle

ou alors

Solution couper-coller qui fonctionne pour tous les principaux navigateurs (même Safari)

N'importe quelle hauteur ou largeur fonctionnera

 <style>
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }
</style>
<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

Ajoutez éventuellement class="item_direction à chaque élément pour modifier la direction du flux de texte en arrière, tout en préservant la direction du conteneur.

Answer 3

Non, vous ne pouvez pas modifier le placement des barres de défilement sans aucun problème supplémentaire.

Vous pouvez changer la direction du texte de droite à gauche ( rtl ), mais cela change également la position du texte à l'intérieur du bloc.

Ce code peut vous aider, mais je ne suis pas sûr qu'il fonctionne dans tous les navigateurs et systèmes d'exploitation.

 <element style="direction: rtl; text-align: left;" />