Як розташувати смугу прокрутки div на лівій стороні?

Чи можна вказати позицію (ліву або праву сторону) для розміщення вертикальної смуги прокрутки на div?

Наприклад, подивіться на цю сторінку, яка пояснює, як використовувати атрибут overflow. Чи є спосіб розміщення цієї смуги прокрутки ліворуч від прокручуваної області?

Робочий приклад: 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-бік прокрутки