¿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?
Respuestas:
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_direction
a cada elemento para cambiar la dirección del flujo de texto hacia atrás, mientras se conserva la dirección del contenedor.fuente
class="item_direction"
lugar deid="item_direction"
y en.item_direction {
lugar de#item_direction {
..list_container > * { direction: ltr; }
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.
fuente
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 secundariodirection: 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/
fuente
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-transform
o-webkit-transform
para navegadores tan antiguos como IE 9. Marque CanIUse y haga clic en "mostrar todo" para ver los requisitos del navegador anterior.fuente
transform: scaleY(-1)
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;" />
fuente
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
fuente
Hay un
npm
paquete específico para ello. css-scrollbar-sidefuente