Jak ustawić pasek przewijania DIV po lewej stronie?

Czy można określić pozycję (po lewej lub prawej stronie) umieszczenia pionowego paska przewijania w elemencie DIV?

Na przykład spójrz na tę stronę, która wyjaśnia, jak używać atrybutu przepełnienia. Czy istnieje sposób na umieszczenie tego paska przewijania po lewej stronie przewijanego obszaru?

Przykład roboczy: JSFiddle

lub

Rozwiązanie do wycinania i wklejania, które działa we wszystkich głównych przeglądarkach (nawet Safari)

Dowolna wysokość lub szerokość będzie działać

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

Opcjonalnie dodaj class="item_directiondo każdego elementu, aby zmienić kierunek przepływu tekstu z powrotem, zachowując kierunek kontenera.

Możesz spróbować direction:rtl;w swoim css. Następnie zresetuj kierunek tekstu w wewnętrznymdiv

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

#scroll div{
    direction:ltr;
}

Niesprawdzone.

Mam ten sam problem. ale kiedy dodam direction: rtl;tabulatory i combo akordeonowe, to niszczy moją strukturę.

Sposób na to polega na dodaniu div z direction: rtl;elementem nadrzędnym, a dla potomnego zestawu div direction: ltr;.

Używam tego pierwszego https://api.jquery.com/wrap/

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

to po prostu pracuj z css :)

U dzieci div dodaj do css

 .your_class {
            direction: ltr;    
        }

Oraz do nadrzędnego div dodanego przez jQuery z klasą .scroll

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

U mnie działa doskonale

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

Trochę starego pytania, ale pomyślałem, że powinienem dorzucić metodę, która nie była szeroko dostępna, gdy zadano to pytanie.

Możesz odwrócić stronę paska przewijania w nowoczesnych przeglądarkach, używając transform: scaleX(-1)na rodzicu<div> , a następnie zastosować tę samą transformację, aby odwrócić element podrzędny „rękaw”.

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
}

Uwaga: może być konieczne użycie prefiksu -ms-transformlub w -webkit-transformprzypadku przeglądarek w wersji starszej niż IE 9. Zaznacz CanIUse i kliknij „pokaż wszystko”, aby wyświetlić wymagania dotyczące starszych przeglądarek.

Nie, nie możesz zmienić położenia pasków przewijania bez żadnych dodatkowych problemów.

Możesz zmienić kierunek tekstu na od prawej do lewej (rtl), ale zmienia to również położenie tekstu w bloku.

Ten kod może ci pomóc, ale nie jestem pewien, czy działa we wszystkich przeglądarkach i systemie operacyjnym.

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

Oto, co zrobiłem, aby prawy pasek przewijania działał. Jedyną rzeczą, którą należy wziąć pod uwagę, jest użycie parametru „direction: rtl” i cała tabela również musi zostać zmieniona. Mam nadzieję, że dzięki temu dowiesz się, jak to zrobić.

Przykład:

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

Sprawdź to: JSFiddle

Jest do tego dedykowany npmpakiet. css-scrollbar-side