左側にdivスクロールバーを配置するにはどうすればよいですか？

divに垂直スクロールバーを配置する位置（左側または右側）を指定することはできますか？

たとえば、オーバーフロー属性の使用方法を説明しているこのページを見てください。そのスクロールバーをスクロール可能な領域の左側に配置する方法はありますか？

実例：JSFiddle

または

すべての主要なブラウザで機能するカットアンドペーストソリューション（Safariでも）

任意の高さまたは幅で機能します

<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_direction、各アイテムに追加して、コンテナの方向を維持しながら、テキストの逆流の方向を変更します。

あなたはdirection:rtl;あなたのCSSで試すことができます。次に、内側のテキストの方向をリセットしますdiv

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

#scroll div{
    direction:ltr;
}

テストされていません。

私は同じ問題を抱えています。しかしdirection: rtl;、タブとアコーディオンコンボを追加すると、構造がクラッシュします。

これを行う方法はdirection: rtl;、親要素としてdivを追加し、子divセットの場合direction: ltr;です。

私はこれを最初に使用しますhttps://api.jquery.com/wrap/

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

次に、cssを使用するだけです:)

子供たちのdivはcssに追加します

 .your_class {
            direction: ltr;    
        }

そして、クラス.scrollでjQueryによって追加された親divに

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

私のために首長の作品

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

ちょっと古い質問ですが、この質問をしたときに広く利用できなかった方法を投入すべきだと思いました。

最近のブラウザtransform: scaleX(-1)では、親を使用してスクロールバーの側面<div>を反転してから、同じ変換を適用して子の「スリーブ」要素を反転させることができます。

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
}

注：IE 9と同じくらい古いブラウザーには、-ms-transformまたは-webkit-transformプレフィックスを使用する必要がある場合があります。CanIUseを確認し、[すべて表示]をクリックして、古いブラウザーの要件を確認してください。

いいえ、追加の問題なしにスクロールバーの配置を変更することはできません。

テキストの方向を右から左（rtl）に変更できますが、ブロック内のテキストの位置も変更されます。

このコードは役に立ちますが、すべてのブラウザとOSで機能するかどうかはわかりません。

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

これが、右のスクロールバーを機能させるために私が行ったことです。考慮する必要があるのは、「方向：rtl」を使用する場合のみであり、テーブル全体も変更する必要があります。うまくいけば、これはあなたにそれを行う方法のアイデアを与えるでしょう。

例：

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

これを確認してください：JSFiddle

専用のnpmパッケージがあります。css-スクロールバー側