Как разместить панель прокрутки div с левой стороны?

Можно ли указать позицию (левую или правую сторону) для размещения вертикальной полосы прокрутки на div?

Например, просмотрите эту страницу, в которой объясняется, как использовать атрибут переполнения. Есть ли способ разместить эту полосу прокрутки в левой части прокручиваемой области?

Ответ 1

Вы можете попробовать direction:rtl; в своем css. Затем reset направление текста во внутреннем div

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

#scroll div{
    direction:ltr;
}

Непроверенные.

Ответ 2

У меня та же проблема. но когда я добавляю 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/

Ответ 3

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

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

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

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

Ответ 4

Вид старого вопроса, но я подумал, что должен бросить метод, который не был широко доступен, когда задавался этот вопрос.

Вы можете перевернуть сторону полосы прокрутки в современных браузерах с помощью 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 и нажмите "показать все", чтобы увидеть старые требования к браузеру.

Ответ 5

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

Пример:

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

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