¿Cómo cambiar la posición de la barra de desplazamiento con CSS?


94

¿Hay alguna forma de cambiar la posición de la barra de desplazamiento de izquierda a derecha o de abajo hacia arriba con CSS?


¿Barra de desplazamiento de su navegador?
Awais Umar

pruebe este complemento jscrollpane.kelvinluck.com Este complemento de jquery le permitirá hacer CSS personalizado en la barra de desplazamiento.
Awais Umar

Lo único que se me ocurre es tener una barra de desplazamiento personalizada y un estilo que la coloque como desee. El complemento jscrollpane sugerido por @AwaisUmar es algo que he usado en el pasado y es un buen comienzo.
Zhihao

Más bien todos los navegadores, pero si conoce un navegador específico, díganos
Mohsen Safari

No hay forma de hacerlo con CSS puro.
Itay

Respuestas:


125

Usando solo CSS:

Flippiing derecha / izquierda: violín de trabajo

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Volteo superior / inferior: violín de trabajo

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

1
No veo una barra de desplazamiento superior al voltear diven Chrome 29 en el violín de volteo superior / inferior .
Mathijs Flietstra

Aparentemente, es un error del navegador . Actualicé mi Fiddle en la respuesta. revíselo ahora.
avrahamcool

En Google Chrome 35.0.1916.153, cuando giro dos veces, hay algunos problemas con las entradas / selección. En FF todo funciona bien.
lechup

@lechup ¿puedes publicar un violín? intentaremos ayudar.
avrahamcool

1
Acabo de descubrir un error (en Edge). Si el contenido invertido contiene una tabla con casillas de verificación en cada una de sus filas, los eventos de puntero se estropearán. Si selecciona la última casilla de verificación, seleccionará la primera y viceversa. Ver fiddle jsfiddle.net/uPwfn/646
James Cazzetta

3

Aquí hay otra forma, rotating elementcon scrollbarfor 180deg,envolverlo contenten otro elemento, y rotatingeso wrapperfor -180deg. Verifique el fragmento a continuación


1
Inteligente, pero al menos en mi Firefox Linux tiene el efecto secundario de intercambiar los efectos de entrada / salida del controlador y la barra de desplazamiento; lo cual es muy confuso.
Martin Tournoij


@Carpetsmoker sí, fijo con la dirección rtly ltr. Por lo tanto, tendrá un efecto de desplazamiento nativo, scroll-down hacia abajo y scroll-uphacia arriba
El proceso

1
Sí, está fijo para la vertical, pero no para la horizontal.
Martin Tournoij

2

Probar esto. Espero que esto ayude

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}

idea inteligente usando diraprendí algo nuevo, pero también necesitaba arriba y abajo
Endless
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.