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

Question 1

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

Question 2

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

Question 3

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

Question 4

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

Answer 1

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?

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

Answer 2

¿Barra de desplazamiento de su navegador?

Awais Umar

Answer 3

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

Awais Umar

Answer 4

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

Answer 5

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

Mohsen Safari

Answer 6

No hay forma de hacerlo con CSS puro.

Itay

Answer 7

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

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

Answer 8

1

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

Mathijs Flietstra

Answer 9

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

avrahamcool

Answer 10

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

Answer 11

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

avrahamcool

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

shaddad

Answer 16

@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

Answer 17

1

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

Martin Tournoij

Answer 18

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

Piyush Arya
fuente

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

Endless

Answer 19

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

Endless

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

Respuestas: