tag - justificar texto html

Desplácese horizontalmente de derecha a izquierda con desbordamiento de CSS: desplace

Question

Así que me pregunto si existe la posibilidad de tener una posición de inicio diferente con el overflow:scroll valor de overflow:scroll ;

Cuando comienza a desplazarse en un div el comportamiento predeterminado es desplazarse de izquierda a derecha:

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

¿Sería posible que comience a la derecha?

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

En mi ejemplo, los elementos red y green son primero visibles. Me gustaría que el elemento green y blue se vean primero :)

He intentado direction:rtl; pero no hay suerte

Answer 1

Por supuesto, puede utilizar la 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

Esto puede ser útil usando la dirección http://css-tricks.com/almanac/properties/d/direction/

Answer 2

Con javascript, simplemente puede establecer la propiedad scrollLeft cuando la página se carga (usando el.scrollLeft = el.scrollWidth - el.clientWidth; ).

Answer 3

Hay un comportamiento inesperado si agrega paréntesis de cierre al final del texto para la respuesta principal. (Probado en 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>

Mira este feedle para ver el resultado: http://jsfiddle.net/mm37pqxa/

Answer 4

He estado trabajando en un proyecto y para mí funciona muy bien así:

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

Answer 5

No conozco ninguna solución con solo CSS, pero puedes usar Jquery para cambiar la posición inicial de la barra de desplazamiento de esta manera:

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

Mira este Fiddle Demo

Answer 6

Puedes hacer esto con una línea de jQuery:

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