Comment inverser la position de la barre de défilement à l'aide de CSS ?

Inversion de la position de la barre de défilement avec CSS

Changement de l'orientation de la barre de défilement

CSS ne fournit pas de méthodes directes pour modifier la position des barres de défilement de gauche à droite ou vice-versa versa. Cependant, vous pouvez y parvenir en utilisant des approches indirectes.

Retournement droite/gauche

Pour retourner la barre de défilement de gauche à droite :

1. Définissez un conteneur wrapper avec overflow-x: auto;.
2. Créez un contenu qui dépasse la largeur du conteneur.
3. Direction d'utilisation : rtl; sur le conteneur d'emballage pour retourner la barre de défilement.
4. Remplacez la direction : ltr; sur le contenu pour empêcher le retournement du texte.

CSS :

<code class="css">.Container {
  height: 200px;
  overflow-x: auto;
}
.Content {
  height: 300px;
}

.Flipped {
  direction: rtl;
}
.Flipped .Content {
  direction: ltr;
}</code>

Retournement haut/bas

De même, pour retourner la barre de défilement de bas en haut :

1. Définissez un conteneur wrapper avec overflow-y: auto;.
2. Créez un contenu qui dépasse la hauteur du conteneur.
3. Utilisez transform:rotateX(180deg); sur le conteneur wrapper et son contenu pour retourner la barre de défilement à l'envers.

CSS :

<code class="css">.Container {
  width: 200px;
  overflow-y: auto;
}
.Content {
  width: 300px;
}

.Flipped, .Flipped .Content {
  transform:rotateX(180deg);
  -ms-transform:rotateX(180deg); /* IE 9 */
  -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!