Comment changer la position de la barre de défilement avec CSS?

Question

Y a-t-il un moyen de changer la position de la barre de défilement de la gauche vers la droite ou du bas vers le haut avec CSS ?

Answer 1

Utilisation de CSS uniquement :

Rotation à droite/gauche : Fiddle Fonctionnel

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Retourné
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Rotation en haut/en bas : Fiddle Fonctionnel

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Retourné, .Retourné .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari et Chrome */
}

Answer 2

Voici une autre façon, en tournant l'élément avec la barre de défilement de 180deg, en enveloppant son contenu dans un autre élément, et en tournant ce wrapper de -180deg . Consultez l'extrait ci-dessous

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 15px;
}
#vertical {
  direction: rtl;
  overflow-y: scroll;
  overflow-x: hidden;
  background: gold;
}
#vertical p {
  direction: ltr;
  margin-bottom: 0;
}
#horizontal {
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
  background: tomato;
  padding-top: 30px;
}
#horizontal span {
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

   contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu
     contenu 

 contenu_contenu_contenu_contenu_contenu_contenu_contenu_contenu_contenu_contenu_contenu_contenu_contenu

Answer 3

Essayez ceci. J'espère que cela aide

    Unique

    Les Deux

#single, #both{
    largeur: 100px;
    hauteur: 100px;
    débordement: auto;
    marge: 0 auto;
    bordure: 1px solide gris;
}

.common{
    hauteur: 150px;
    largeur: 150px;
}

Answer 4

Il y a en fait un moyen simple, il suffit de changer la propriété "direction" de l'élément conteneur (celui qui a la barre de défilement) en "rtl" et l'élément enfant en "ltr"

/* ceci est le conteneur */
#home {
    direction: rtl;/* ceci ici */
    padding-left: 20px;
}

/* ceci est l'enfant */
.content-container {
    direction: ltr;/* ceci ici */
    width: 100%;
}