Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

DDD
Freigeben: 2024-11-04 13:38:18
Original
299 Leute haben es durchsucht

How to Flip Scrollbar Position Using CSS?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage