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

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

html css scrollbar

— Safari de Mohsen
fuente

¿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 */
}

— avrahamcool
fuente

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

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

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

Mostrar fragmento de código

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 15px;
}
#vertical {
  direction: rtl;
  overflow-y: scroll;
  overflow-x: hidden;
  background: gold;
}
#vertical p {
  direction: ltr;
  margin-bottom: 0;
}
#horizontal {
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
  background: tomato;
  padding-top: 30px;
}
#horizontal span {
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
  <p>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>

Expandir fragmento

— El proceso
fuente

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

mire este ansower stackoverflow.com/questions/7889449/…

— shaddad

@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

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

— Martin Tournoij

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;
}

— Piyush Arya
fuente

idea inteligente usando diraprendí algo nuevo, pero también necesitaba arriba y abajo

— Endless