Wie drehe ich die Position der Bildlaufleiste mithilfe von CSS um?

Position der Bildlaufleiste mit CSS umdrehen

Ausrichtung der Bildlaufleiste ändern

CSS bietet keine direkten Methoden, um die Position der Bildlaufleisten von links nach rechts oder umgekehrt zu ändern umgekehrt. Sie können dies jedoch mit indirekten Ansätzen erreichen.

Rechts-/Linksspiegelung

Um die Bildlaufleiste von links nach rechts umzudrehen:

1. Definieren Sie einen Wrapper-Container mit overflow-x: auto;.
2. Erstellen Sie Inhalte, die die Breite des Containers überschreiten Container.
3. Verwendungsrichtung: rtl; auf dem Wrapper-Container, um die Bildlaufleiste umzudrehen.
4. Richtung überschreiben: ltr; auf den Inhalt, um das Umdrehen von Text zu verhindern.

CSS:

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

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

Top/Bottom Flipping

Ebenso können Sie die Bildlaufleiste von unten nach oben umdrehen:

1. Definieren Sie a Wrapper-Container mit overflow-y: auto;.
2. Erstellen Sie Inhalte, die über die Höhe des Containers hinausgehen.
3. Verwenden Sie transform:rotateX(180deg); auf den Wrapper-Container und seinen Inhalt, um die Bildlaufleiste auf den Kopf zu stellen.

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>

Das obige ist der detaillierte Inhalt vonWie drehe ich die Position der Bildlaufleiste mithilfe von CSS um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!