Как разместить полосу прокрутки 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;комбинацию вкладок и аккордеона, это разрушает мою структуру.

Способ сделать это - добавить div в direction: rtl;качестве родительского элемента и установить дочерний 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;    
        }

И к родительскому div, добавленному jQuery с классом .scroll

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

Примечание. Возможно, вам потребуется использовать префикс -ms-transformили -webkit-transformдля браузеров, начиная с IE 9. Установите флажок CanIUse и нажмите «показать все», чтобы увидеть требования к более старым браузерам.

Нет, вы не можете изменить размещение полос прокрутки без каких-либо дополнительных проблем.

Вы можете изменить направление текста справа налево (rtl), но это также изменит положение текста внутри блока.

Этот код может вам помочь, но я не уверен, что он работает во всех браузерах и ОС.

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

Вот что я сделал, чтобы правая полоса прокрутки работала. Единственное, что нужно учитывать, - это использование direction: rtl, а также необходимо изменить всю таблицу. Надеюсь, это даст вам представление о том, как это сделать.

Пример:

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

Проверь это: JSFiddle

Для этого есть специальный npmпакет. css-полоса прокрутки сторона