Прокрутка по горизонтали, начинающаяся справа налево с переполнением CSS: прокрутка

Так что мне интересно, есть ли возможность иметь другую начальную позицию со значением overflow:scroll;

При запуске прокрутки в div поведение по умолчанию - это прокрутка формы слева направо:

|<--Scrollbar-Starting-Left-->_________________________________________________|

возможно ли, что он начинается справа?

|_________________________________________________<--Scrollbar-Starting-Right-->|

В моем примере сначала отображаются элементы red и green, мне бы хотелось, чтобы green и blue элемент должен быть видимым первым:)

Я пробовал direction:rtl;, но не повезло

Ответы

Ответ 1

Конечно, вы можете использовать `direction:rtl`

document.querySelector('input').addEventListener('input', function(){
  document.querySelector('.box').scrollLeft = this.value;
})

.box{
  width: 320px;
  height: 100px;
  border:1px solid red;
  overflow: scroll;
  direction: rtl;  /* <-- the trick */
}

.box::before{ content:''; display:block; width:400%; height:1px; }

<div class='box'></div>
<br>
<input placeholder='scrollLeft value'>

Ответ 2

Я не знаю о каком-либо решении только с CSS, но вы можете использовать JQuery для изменения начального положения полосы прокрутки следующим образом:

$(document).ready(function(){
    $('#box').scrollLeft($(this).height())
})

Проверьте Демо-скрипт

Ответ 3

С помощью javascript вы можете просто установить свойство scrollLeft при загрузке страницы (используя el.scrollLeft = el.scrollWidth - el.clientWidth;).

Ответ 4

Я работаю над проектом, и для меня это очень хорошо работает:

overflow-x: scroll;   
overflow-y: hidden;   
white-space: nowrap;

Ответ 5

Существует неожиданное поведение, если вы добавляете закрывающую скобку в конце текста для верхнего ответа. (Протестировано в Chrome 54)

<div id="box">
    <div id="inner_box">
        <div class="item" style="background:red;"></div>
        <div class="item" style="background:green;"></div>
        <div class="item" style="background:blue;">te(st)</div>
    </div>
</div>

Смотрите этот результат для результата: http://jsfiddle.net/mm37pqxa/

Ответ 6

Вы можете сделать это с помощью одной строки jQuery:

$("#box").scrollLeft(480);