1. ホーム
  2. html

[解決済み] divスクロールバーを左側に配置するには?

2022-12-17 07:12:03

質問

divの縦スクロールバーの配置に位置(左右)を指定することは可能でしょうか?

例えば このページ で、overflow 属性の使い方が説明されています。そのスクロールバーをスクロール可能な領域の左側に配置する方法はないでしょうか?

どのように解決するのですか?

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

動作例です。 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 を追加すると、コンテナの方向を維持したまま、テキストのフローバックの方向を変更することができます。