¿Cómo colocar una barra de desplazamiento div en el lado izquierdo?

¿Es posible especificar una posición (lado izquierdo o derecho) para la ubicación de una barra de desplazamiento vertical en un div?

Por ejemplo, mire esta página que explica cómo utilizar el atributo de desbordamiento. ¿Hay alguna forma de colocar esa barra de desplazamiento en el lado izquierdo del área desplazable?

Ejemplo de trabajo: JSFiddle

o

Solución de cortar y pegar que funciona para todos los navegadores principales (incluso Safari)

Cualquier altura o ancho funcionará

<style>
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }
</style>
<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

Opcionalmente, agregue class="item_directiona cada elemento para cambiar la dirección del flujo de texto hacia atrás, mientras se conserva la dirección del contenedor.

Podrías probar direction:rtl;en tu css. Luego restablece la dirección del texto en el interiordiv

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

Sin probar.

Tengo el mismo problema. pero cuando agrego direction: rtl;pestañas y combo de acordeón, se bloquea mi estructura.

La forma de hacerlo es agregar div con direction: rtl;como elemento principal y para el conjunto div secundario direction: ltr;.

Yo uso este primero https://api.jquery.com/wrap/

$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );

entonces simplemente trabaja con css :)

En los niños, div agregar a css

 .your_class {
            direction: ltr;    
        }

Y al div padre agregado por jQuery con class .scroll

.scroll {
            unicode-bidi:bidi-override;
            direction: rtl;
            overflow: scroll;
            overflow-x: hidden!important;
        }

Funciona perfecto para mi

http://jsfiddle.net/jw3jsz08/1/

Es una pregunta antigua, pero pensé que debería incluir un método que no estaba ampliamente disponible cuando se hizo esta pregunta.

Puede invertir el lado de la barra de desplazamiento en los navegadores modernos usando transform: scaleX(-1)un elemento principal <div>, luego aplicar la misma transformación para invertir un elemento secundario, "manga".

HTML

<div class="parent">
  <div class="sleeve">
    <!-- content -->
  </div>
</div>

CSS

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}

.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

Nota: Es posible que deba usar un prefijo -ms-transformo -webkit-transformpara navegadores tan antiguos como IE 9. Marque CanIUse y haga clic en "mostrar todo" para ver los requisitos del navegador anterior.

No, no puede cambiar la ubicación de las barras de desplazamiento sin problemas adicionales.

Puede cambiar la dirección del texto de derecha a izquierda (rtl), pero también cambia la posición del texto dentro del bloque.

Este código puede ayudarte, pero no estoy seguro de que funcione en todos los navegadores y sistemas operativos.

<element style="direction: rtl; text-align: left;" />

Esto es lo que he hecho para que la barra de desplazamiento correcta funcione. Lo único que debe tenerse en cuenta es cuando se usa 'direction: rtl' y toda la tabla también debe cambiarse. Con suerte, esto le dará una idea de cómo hacerlo.

Ejemplo:

<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>

Compruebe esto: JSFiddle

Hay un npmpaquete específico para ello. css-scrollbar-side