Sol tarafa bir div kaydırma çubuğu nasıl yerleştirilir?

Bir div üzerindeki dikey kaydırma çubuğunun yerleşimi için bir konum (sol veya sağ taraf) belirtmek mümkün mü?

Örneğin , overflow niteliğinin nasıl kullanılacağını açıklayan bu sayfaya bakın . Bu kaydırma çubuğunu kaydırılabilir alanın sol tarafına yerleştirmenin bir yolu var mı?

Çalışma Örneği: JSFiddle

veya

Tüm büyük tarayıcılar için çalışan kes ve yapıştır çözümü (Safari bile)

Herhangi bir yükseklik veya genişlik çalışacaktır

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

class="item_directionKap yönünü korurken metin akışının yönünü değiştirmek için isteğe bağlı olarak her bir öğeye ekleyin .

direction:rtl;CSS'nizde deneyebilirsiniz . Ardından iç kısımdaki metin yönünü sıfırlayın.div

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

#scroll div{
    direction:ltr;
}

Test edilmemiş.

Bende de aynı sorun var. ama direction: rtl;sekme ve akordeon kombosu eklediğimde yapımı çökertiyor.

Bunu yapmanın yolu direction: rtl;, üst öğe olarak ve alt div kümesi için div eklemektir direction: ltr;.

Bu ilk https://api.jquery.com/wrap/ kullanıyorum

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

o zaman sadece css ile çalışın :)

Çocuklarda div css'ye ekle

 .your_class {
            direction: ltr;    
        }

Ve jQuery tarafından class .scroll ile eklenen üst div öğesine

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

Benim için kaymakam çalışıyor

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

Biraz eski bir soru, ama bu soru sorulduğunda pek yaygın olmayan bir yöntemi eklemem gerektiğini düşündüm.

Modern tarayıcılarda kaydırma çubuğunun kenarını transform: scaleX(-1)bir üst <div>öğe üzerinde kullanarak ters çevirebilir, ardından aynı dönüşümü çocuk "kılıf" öğesini ters çevirmek için uygulayabilirsiniz.

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
}

Not: IE 9 kadar eski tarayıcılar için bir -ms-transformveya -webkit-transformönek kullanmanız gerekebilir. CanIUse'u kontrol edin ve eski tarayıcı gereksinimlerini görmek için "tümünü göster" i tıklayın.

Hayır, herhangi bir ek sorun olmadan kaydırma çubuklarının yerleşimini değiştiremezsiniz.

Metin yönünü sağdan sola (rtl) olarak değiştirebilirsiniz, ancak aynı zamanda blok içindeki metnin konumunu da değiştirir.

Bu kod size yardımcı olabilir, ancak tüm tarayıcılarda ve işletim sistemlerinde çalıştığından emin değilim.

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

İşte doğru kaydırma çubuğunun çalışması için yaptığım şey. Dikkate alınması gereken tek şey, 'direction: rtl' kullanılırken ve tüm tablonun da değiştirilmesi gerektiğidir. Umarım bu size nasıl yapılacağına dair bir fikir verir.

Misal:

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

Şunu kontrol edin: JSFiddle

Bunun için özel bir npmpaket var. css kaydırma çubuğu tarafı