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

Est-il possible de spécifier une position (côté gauche ou droit) pour le placement d’une barre de défilement verticale sur un div?

Par exemple, regardez cette page qui explique comment utiliser l’atsortingbut de débordement. Y a-t-il un moyen de placer cette barre de défilement sur le côté gauche de la zone de défilement?

Exemple de travail: JSFiddle

ou

Coupez et collez la solution qui fonctionne pour tous les principaux navigateurs (Even Safari)

Toute hauteur ou largeur fonctionnera

 
1
2
3
4
5
6
7
8
9
10
11
12

Ajouter facultativement class="item_direction à chaque élément pour modifier la direction du stream de texte tout en préservant la direction du conteneur.

Vous pourriez essayer direction:rtl; dans votre css. Puis réinitialiser la direction du texte dans le div interne

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

Non testé

J’ai le même problème. mais quand j’ajoute la direction: rtl; dans les tabs et l’accordéon combo mais il plante ma structure.

La façon de le faire est d’append div avec direction: rtl; en tant qu’élément parent et pour div enfant, définissez la direction: ltr; .

J’utilise ce premier https://api.jquery.com/wrap/

 $( ".your selector of child element" ).wrap( "
" );

alors il suffit simplement de travailler avec css 🙂

En enfants div append à css

  .your_class { direction: ltr; } 

Et pour parent div ajouté par jQuery avec la classe .scroll

 .scroll { unicode-bidi:bidi-override; direction: rtl; overflow: scroll; overflow-x: hidden!important; } 

Travaille préfet pour moi

http://jsfiddle.net/jw3jsz08/1/

Une sorte de vieille question, mais je pensais que je devrais lancer une méthode qui n’était pas largement disponible lorsque cette question a été posée.

Vous pouvez inverser le côté de la barre de défilement dans les navigateurs modernes à l’aide de transform: scaleX(-1) sur un parent

, puis appliquer la même transformation pour inverser un élément enfant “manchon”.

HTML

 

CSS

 .parent { overflow: auto; transform: scaleX(-1); //Reflects the parent horizontally } .sleeve { transform: scaleX(-1); //Flips the child back to normal } 

Remarque: vous devrez peut-être utiliser un préfixe -ms-transform ou -webkit-transform pour les navigateurs anciens d’IE 9. Cochez CanIUse et cliquez sur “Tout afficher” pour voir les exigences de navigateur plus anciennes.

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

Vous pouvez changer la direction du texte vers la droite vers la gauche (rtl), mais cela modifie également la position du texte dans le bloc.

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

  

Voici ce que j’ai fait pour que la barre de défilement droite fonctionne. La seule chose à prendre en compte est l’utilisation de ‘direction: rtl’ et la table entière doit également être modifiée. J’espère que cela vous donnera une idée de comment le faire.

Exemple:

 
Display LastDisplay SecondDisplay First

Vérifiez ceci: JSFiddle