Wie ändere ich die Position der Bildlaufleiste mit CSS?

89

Gibt es eine Möglichkeit, die Position der Bildlaufleiste mit CSS von links nach rechts oder von unten nach oben zu ändern?

Mohsen Safari
quelle
Bildlaufleiste Ihres Browsers?
Awais Umar
Probieren Sie dieses Plugin aus jscrollpane.kelvinluck.com Mit diesem jquery-Plugin können Sie benutzerdefinierte CSS- Dateien in der Bildlaufleiste erstellen.
Awais Umar
Das einzige, was ich mir vorstellen kann, ist eine benutzerdefinierte Bildlaufleiste und einen Stil, der so positioniert wird, wie Sie es möchten. Das von @AwaisUmar vorgeschlagene jscrollpane-Plugin habe ich in der Vergangenheit verwendet und ist ein ziemlich guter Anfang.
Zhihao
Eher alle Browser, aber wenn Sie über bestimmte Browser wissen, sagen Sie uns
Mohsen Safari
Mit reinem CSS geht das nicht.
Itay

Antworten:

120

Nur CSS verwenden:

Rechts / Links Flippiing: Working Fiddle

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

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Top / Bottom Flipping: Arbeitsgeige

.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 */
}
avrahamcool
quelle
1
Ich sehe keine obere Bildlaufleiste auf der divin Chrome 29 umgedrehten Geige auf der oberen / unteren umgedrehten Geige.
Mathijs Flietstra
Anscheinend ist es ein Browser-Fehler . Ich habe meine Geige in der Antwort aktualisiert. überprüfen Sie es jetzt.
Avrahamcool
In Google Chrome 35.0.1916.153 gibt es beim doppelten Drehen einige Probleme mit Eingaben / Auswahl. In FF funktioniert alles in Ordnung.
Lechup
@lechup kannst du eine Geige posten? Wir werden versuchen zu helfen.
Avrahamcool
1
Ich habe gerade einen Fehler entdeckt (auf Edge). Wenn der gespiegelte Inhalt eine Tabelle mit Kontrollkästchen in jeder seiner Zeilen enthält, werden die Zeigerereignisse durcheinander gebracht. Wenn Sie das letzte Kontrollkästchen aktivieren, wird das erste aktiviert und umgekehrt. Siehe fiddle jsfiddle.net/uPwfn/646
James Cazzetta
3

Hier ist ein anderer Weg, indem rotating elementmit dem scrollbarzum 180deg,Einwickeln es contentin ein anderes Element ist, und rotatingdas wrapperfür -180deg. Überprüfen Sie das Snippet unten

Der Prozess
quelle
1
Clever, aber zumindest auf meinem Linux-Firefox hat es den Nebeneffekt, dass die Inset- / Outset-Effekte des Handlers und der Bildlaufleiste ausgetauscht werden. das ist super verwirrend.
Martin Tournoij
Schauen Sie sich diese Ansower Stackoverflow.com/questions/7889449/…
Shaddad
@ Carpetsmoker ja, fest mit der rtlund ltrRichtung. Es wird also einen nativen Scroll-Effekt haben, scroll-down nach unten und scroll-upnach oben
The Process
1
Ja, es ist fest für die Vertikale, aber nicht für die Horizontale.
Martin Tournoij
2

Probieren Sie es aus. Hoffe das hilft

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}
Piyush Arya
quelle
clevere Idee mit diretwas Neuem gelernt, aber ich brauchte auch oben und unten
Endless