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

82

¿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?

Andrew Fielden
fuente
Eche un vistazo a este hilo. Me temo que muestra algunas de las limitaciones de esto. stackoverflow.com/questions/5123417/…
Graeme Leighfield

Respuestas:

55

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.

Jasonleonhard
fuente
Feliz de complacer.
jasonleonhard
3
Como nota al margen: esta respuesta no es HTML válido ya que tiene ID duplicados. Debería ser en class="item_direction"lugar de id="item_direction"y en .item_direction {lugar de #item_direction {.
movabo
2
Disculpas, respondí rápidamente y cometí un error, estás en lo correcto y he actualizado mi respuesta.
jasonleonhard
También puede usar otra regla CSS para restablecer la dirección en todos los hijos directos:.list_container > * { direction: ltr; }
Erich Schreiner
74

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.

Jason Gennaro
fuente
2
Creo que IE y Opera son los únicos navegadores que colocan la barra de desplazamiento a la izquierda para el contenido RTL.
Joey
2
@Joey no es cierto también chrome bajo ubuntu
Tom
Quiero confirmar que Chrome 32 posiciones a la izquierda. Y en este punto no es de extrañar que Firefox esté rezagado en CSS
George Mauer
1
Trabajando en chrome / mac y firefox / mac pero no safari / mac
maxime schoeni
1
@GeorgeMauer Mozilla dejó la barra de desplazamiento a la derecha para contenido RTL a propósito. En ese momento, pensamos que sería un problema de usabilidad si el usuario tuviera que cambiar su memoria muscular en función del contenido de la página actual. Yo estaba participando en esa discusión, que se puede encontrar en Bugzilla de Mozilla.
Tsahi Asher
32

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/

usuario1597594
fuente
O puede hacer CSS como este: .scrollBarOnLeft {unicode-bidi: bidi-override; dirección: rtl; desbordamiento: desplazamiento; overflow-x: oculto! importante; } .scrollBarOnLeft> div {dirección: ltr; } .scrollBarOnLeft> div> div {}
john ktejik
30

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.

Dom Ramírez
fuente
3
Esta es una de las soluciones más destacadas.
Miron
1
¡Gracias! Por lo que tengo entendido, cambiar la dirección del texto también funciona. La propiedad transform se siente más ... ¿elegante? Al menos es más semánticamente correcto. :)
Dom Ramirez
2
Creo que también se beneficiará de algunas mejoras de la GPU con este método. Estoy volando en un menú desde el lado derecho de la pantalla y no quiero que la barra de desplazamiento del menú al lado de la barra de desplazamiento de la página ... sea demasiado confusa. Obtengo menos tirones de animación usando esto que el cambio de dirección.
Davin Studer
Me gusta MUCHO .. Gracias hombre
Hady Shaltout
2
Este método también se puede utilizar para colocar la barra de desplazamiento horizontal en la parte superior:transform: scaleY(-1)
Daniel Williams
9

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;" />
Artem Oliynyk
fuente
Creo que IE y Opera son los únicos navegadores que colocan la barra de desplazamiento a la izquierda para el contenido RTL.
Joey
0

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

Li Kia Chiu
fuente