Можно ли указать позицию (левую или правую) для размещения вертикальной полосы прокрутки в 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
к каждому элементу, чтобы изменить направление потока текста назад, сохраняя при этом направление контейнера.источник
class="item_direction"
вместоid="item_direction"
и.item_direction {
вместо#item_direction {
..list_container > * { direction: ltr; }
Вы можете попробовать
direction:rtl;
в своем css. Затем сбросьте направление текста во внутреннемdiv
#scroll{ direction:rtl; overflow:auto; height:50px; width:50px;} #scroll div{ direction:ltr; }
Не проверено.
источник
У меня та же проблема. но когда я добавляю
direction: rtl;
комбинацию вкладок и аккордеона, это разрушает мою структуру.Способ сделать это - добавить div в
direction: rtl;
качестве родительского элемента и установить дочерний divdirection: 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 и нажмите «показать все», чтобы увидеть требования к более старым браузерам.источник
transform: scaleY(-1)
Нет, вы не можете изменить размещение полос прокрутки без каких-либо дополнительных проблем.
Вы можете изменить направление текста справа налево (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-полоса прокрутки сторонаисточник