Jak ustawić pasek przewijania DIV po lewej stronie?


85

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?


Spójrz na ten wątek. Pokazuje niektóre ograniczenia tego obawiam się. stackoverflow.com/questions/5123417/…
Graeme Leighfield

Odpowiedzi:


61

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.


Chętnie zobowiązuję się.
jasonleonhard

3
Na marginesie: ta odpowiedź nie jest poprawnym kodem HTML, ponieważ ma zduplikowane identyfikatory. Powinien być class="item_direction"zamiast id="item_direction"i .item_direction {zamiast #item_direction {.
movabo

2
Przepraszam, odpowiedziałem szybko i popełniłem błąd, masz rację i zaktualizowałem moją odpowiedź.
jasonleonhard

1
Możesz także użyć innej reguły CSS, aby zresetować kierunek dla wszystkich bezpośrednich dzieci:.list_container > * { direction: ltr; }
Erich Schreiner,

74

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.


2
Myślę, że IE i Opera to jedyne przeglądarki, które umieszczają pasek przewijania po lewej stronie dla treści RTL.
Joey,

2
@Joey nie prawda, również chrome pod ubuntu
Tom

Chcę potwierdzić, że Chrome 32 pozycje po lewej stronie. I w tym momencie nie jest zaskoczeniem, że Firefox jest laggardem w css
George Mauer

1
Praca na chrom i Firefox / Mac / Mac, ale nie safari / Mac
Maxime Schoeni

1
@GeorgeMauer Mozilla celowo opuścił pasek przewijania po prawej stronie, aby wyświetlić zawartość RTL. W tamtym czasie uważaliśmy, że byłoby to problemem z użytecznością, gdyby użytkownik musiał zmieniać pamięć mięśniową w oparciu o bieżącą zawartość strony. Brałem udział w tej dyskusji, którą można znaleźć w Bugzilli Mozilli.
Tsahi Asher,

32

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/


Lub możesz zrobić css w ten sposób: .scrollBarOnLeft {unicode-bidi: bidi-override; kierunek: rtl; przepełnienie: przewijanie; overflow-x: ukryte! ważne; } .scrollBarOnLeft> div {direction: ltr; } .scrollBarOnLeft> div> div {}
john ktejik

32

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.


3
To jedno z najwybitniejszych rozwiązań.
Miron,

1
Dzięki! Z tego, co rozumiem, działa też zmiana kierunku tekstu. Właściwość transformacji wydaje się po prostu bardziej ... elegancka? Przynajmniej jest to bardziej poprawne semantycznie. :)
Dom Ramirez

2
Myślę, że skorzystasz również z niektórych ulepszeń GPU przy użyciu tej metody. Lecę w menu z prawej strony ekranu i nie chcę, aby pasek przewijania menu znajdował się obok paska przewijania strony ... zbyt zagmatwany. Uzyskuje mniej szarpnięć animacji niż przy przełączaniu kierunku.
Davin Studer

Podoba mi się LOOOT ... Dzięki człowieku
Hady Shaltout

2
Tej metody można również użyć do umieszczenia poziomego paska przewijania na górze:transform: scaleY(-1)
Daniel Williams,

9

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;" />

Myślę, że IE i Opera to jedyne przeglądarki, które umieszczają pasek przewijania po lewej stronie dla treści RTL.
Joey,

0

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


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.