Wie positioniere ich eine Div-Bildlaufleiste auf der linken Seite?

Ist es möglich, eine Position (linke oder rechte Seite) für die Platzierung einer vertikalen Bildlaufleiste auf einem Div anzugeben?

Schauen Sie sich zum Beispiel diese Seite an, auf der erklärt wird, wie das Überlaufattribut verwendet wird. Gibt es eine Möglichkeit, diese Bildlaufleiste auf der linken Seite des scrollbaren Bereichs zu platzieren?

Arbeitsbeispiel: JSFiddle

oder

Lösung zum Ausschneiden und Einfügen, die für alle gängigen Browser geeignet ist (auch für Safari)

Jede Höhe oder Breite wird funktionieren

<style>
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }
</style>
<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

Optional class="item_directionzu jedem Element hinzufügen , um die Richtung des Textflusses zu ändern, wobei die Containerrichtung beibehalten wird.

Sie könnten es direction:rtl;in Ihrem CSS versuchen . Setzen Sie dann die Textrichtung im Inneren zurückdiv

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

Ungetestet.

Ich habe das gleiche Problem. aber wenn ich direction: rtl;Tabs und Akkordeon Combo hinzufüge , stürzt es aber meine Struktur ab.

Der Weg, dies zu tun, ist das Hinzufügen von div mit direction: rtl;als übergeordnetem Element und für das untergeordnete div-Set direction: ltr;.

Ich benutze diese erste https://api.jquery.com/wrap/

$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );

dann arbeite einfach mit css :)

Bei Kindern div zu CSS hinzufügen

 .your_class {
            direction: ltr;    
        }

Und zum übergeordneten Div, das von jQuery mit der Klasse .scroll hinzugefügt wurde

.scroll {
            unicode-bidi:bidi-override;
            direction: rtl;
            overflow: scroll;
            overflow-x: hidden!important;
        }

Arbeitet Präfekt für mich

http://jsfiddle.net/jw3jsz08/1/

Eine Art alte Frage, aber ich dachte, ich sollte eine Methode einführen, die nicht allgemein verfügbar war, als diese Frage gestellt wurde.

Sie können die Seite der Bildlaufleiste in modernen Browsern mithilfe transform: scaleX(-1)eines übergeordneten <div>Elements umkehren und dann dieselbe Transformation anwenden, um ein untergeordnetes "Ärmel" -Element umzukehren.

HTML

<div class="parent">
  <div class="sleeve">
    <!-- content -->
  </div>
</div>

CSS

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}

.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

Hinweis: Möglicherweise müssen Sie ein -ms-transformoder ein -webkit-transformPräfix für Browser verwenden, die so alt sind wie IE 9. Aktivieren Sie CanIUse und klicken Sie auf "Alle anzeigen ", um ältere Browseranforderungen anzuzeigen .

Nein, Sie können die Platzierung der Bildlaufleisten nicht ohne zusätzliche Probleme ändern.

Sie können die Textrichtung von rechts nach links (rtl) ändern, aber auch die Textposition innerhalb des Blocks.

Dieser Code kann Ihnen helfen, aber ich bin nicht sicher, ob er in allen Browsern und Betriebssystemen funktioniert.

<element style="direction: rtl; text-align: left;" />

Folgendes habe ich getan, damit die rechte Bildlaufleiste funktioniert. Das einzige, was berücksichtigt werden muss, ist, wenn 'direction: rtl' verwendet wird und die gesamte Tabelle ebenfalls geändert werden muss. Hoffentlich gibt Ihnen dies eine Idee, wie es geht.

Beispiel:

<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>

Überprüfen Sie dies: JSFiddle

Es gibt ein spezielles npmPaket dafür. CSS-Bildlaufleisten-Seite