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

Question 1

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

Betrachten Sie zum Beispiel diese Seite was erklärt, wie das overflow-Attribut verwendet wird. Gibt es eine Möglichkeit, diese Bildlaufleiste auf der linken Seite des scrollbaren Bereichs zu platzieren?

Question 2

Du könntest es versuchen direction:rtl; in deinem CSS. Setzen Sie dann die Textrichtung im Inneren zurück div

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

#scroll div{
    direction:ltr;
}

Ungetestet.

Question 3

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

  .item_direction {
    direction:ltr;
  }

<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>

Arbeitsbeispiel: JSFiddle

oder

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

Jede Höhe oder Breite funktioniert

<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 hinzufügen class="item_direction zu jedem Element, um die Richtung des Textflusses zurück zu ändern, während die Containerrichtung beibehalten wird.

Question 4

Irgendwie eine alte Frage, aber ich dachte, ich sollte eine Methode einwerfen, die nicht allgemein verfügbar war, als diese Frage gestellt wurde.

Sie können die Seite der Bildlaufleiste in modernen Browsern mit umkehren transform: scaleX(-1) auf einen Elternteil <div>, und wenden Sie dann dieselbe Transformation an, um ein untergeordnetes “sleeve”-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 eine verwenden -ms-transform oder -webkit-transform Präfix für Browser so alt wie IE 9. Prüfen Kann ich benutzen und klicken Sie auf “Alle anzeigen”, um ältere Browseranforderungen anzuzeigen.

Question 5

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

Der Weg, es zu tun, ist div mit hinzuzufügen direction: rtl; als übergeordnetes Element und für untergeordnetes div-Set direction: ltr;.

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

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

dann einfach mit css arbeiten 🙂

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

Funktioniert für mich perfekt

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

Question 6

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

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

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

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

Question 7

Folgendes habe ich getan, damit die rechte Bildlaufleiste funktioniert. Es muss lediglich beachtet werden, dass bei Verwendung von ‘direction: rtl’ auch ganze Tabellen geändert werden müssen. Hoffentlich gibt Ihnen das 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

Question 8

Es gibt eine dedizierte npm Paket dazu. css-Scrollbar-Seite