Scroll horizontally starting from right to left with CSS overflow:scroll

Question

So I am wondering if there is a possibility to have a different starting position with the overflow:scroll value;

When you start scrolling in a div the default behaviour is to scroll from left to right:

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

would it possible that it starts at the right?

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

In my example the red and green items are first visible, I'd like the green and blue item to be visible first :)

I've tried direction:rtl; but no luck

Answer 1

You can of course use 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'>

FiddleDemo

This may be useful using direction http://css-tricks.com/almanac/properties/d/direction/