Wie ändere ich die Position der Bildlaufleiste mit CSS?

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

html css scrollbar

— 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

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

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

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

Code-Snippet anzeigen

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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
  <p>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>

Erweitern Sie das Snippet

— Der Prozess
quelle

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

Ja, es ist fest für die Vertikale, aber nicht für die Horizontale.

— Martin Tournoij

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