Переместим полосу прокрутки налево.

Как вы знаете, полоса прокрутки по умолчанию находится справа! Но иногда хочется и просто необходимо разместить полосу прокрутки слева!

Подробно о перемещении полосы прокрутки налево!

1. Полоса прокурки справа пример
2. Полоса прокурки слева пример

Полоса прокурки справа пример

Я уже несколько страниц написал о прокрутке


И нам понадобится пример - его возьмем из предыдущих страниц.

Это простой пример прокрутки, который будет показываться на нашем блоке:

Код блока с расположением по умолчанию прокрутки:

<div style="margin: auto;border: 1px solid; padding: 35px; height: 20px; overflow-x: hidden; width: 200px;">

  <div style="width: 500px;">

    здесь текст,

    здесь текст,

    здесь текст,

    здесь текст,

    здесь текст,

  </div>

</div>

Разместим его прямо здесь:

Пример расположения прокрутки по умолчанию!

Как видим... что наша прокрутка располагается справа!

здесь текст,

здесь текст,

здесь текст,

здесь текст,

здесь текст,




Полоса прокурки слева пример

Далее... нам нужно ркасположить полосу прокрутки с другой стороны, т.е слева...

Берем тоже код, что мы уже видели выше:

Но только добавляем туда магию css:

direction: rtl;

Наш код будет выглядеть так:

<div style="margin: auto;border: 1px solid; padding: 35px; height: 20px; overflow-x: hidden; width: 200px;direction: rtl;">

  <div style="width: 500px;">

    здесь текст,

    здесь текст,

    здесь текст,

    здесь текст,

    здесь текст,

  </div>

</div>

Далее посмотрим на этот код вживую:

Пример расположения прокрутки слева:

Как видим... наша полоса прокрутки оказалась слева...

здесь текст,

здесь текст,

здесь текст,

здесь текст,

здесь текст,

Но!

Как вы можете наблюдать... запятая переместилась аналогично перемещению прокрутки!

Что можно с этим сделать?

Нужно в верхнем коде заменить

<div style="width: 500px;">

На:

<div style="direction: ltr;">

здесь текст,

здесь текст,

здесь текст,

здесь текст,

здесь текст,