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

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; }

FiddleDemo

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