Como mudar a posição da barra de rolagem com CSS?

Question 1

Existe alguma maneira de mudar a posição da barra de rolagem da esquerda para a direita ou de baixo para cima com CSS?

Question 2

Usando CSS apenas:

Flippiing direita / esquerda: violino trabalhando

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

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

Lançamento superior / inferior: violino trabalhando

.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

Aqui é uma outra maneira, por rotating elementcom o scrollbarde 180deg,embrulho é contentem outro elemento, e rotatingque wrapperpara -180deg. Verifique o snippet abaixo

Exibir trecho 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 snippet

Question 4

Experimente isso. Espero que isto ajude

<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

97

Existe alguma maneira de mudar a posição da barra de rolagem da esquerda para a direita ou de baixo para cima com CSS?

html css scrollbar Mohsen Safari
fonte

Barra de rolagem do seu navegador?

Awais Umar,

experimente este plugin jscrollpane.kelvinluck.com Este plugin jquery permitirá que você faça css personalizado na barra de rolagem.

Awais Umar,

A única coisa em que consigo pensar é em ter uma barra de rolagem personalizada e um estilo para posicioná-la como quiser. O plugin jscrollpane sugerido por @AwaisUmar é algo que usei no passado e é um bom começo.

Zhihao,

Todos os navegadores, mas se você souber de um navegador específico, conte-nos

Mohsen Safari

Não há como fazer isso com CSS puro.

Dia

Answer 2

Barra de rolagem do seu navegador?

Awais Umar,

Answer 3

experimente este plugin jscrollpane.kelvinluck.com Este plugin jquery permitirá que você faça css personalizado na barra de rolagem.

Awais Umar,

Answer 4

A única coisa em que consigo pensar é em ter uma barra de rolagem personalizada e um estilo para posicioná-la como quiser. O plugin jscrollpane sugerido por @AwaisUmar é algo que usei no passado e é um bom começo.

Zhihao,

Answer 5

Todos os navegadores, mas se você souber de um navegador específico, conte-nos

Mohsen Safari

Answer 6

Não há como fazer isso com CSS puro.

Dia

Answer 7

127

Usando CSS apenas:

Flippiing direita / esquerda: violino trabalhando

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

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

Lançamento superior / inferior: violino trabalhando

.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
fonte

1

Não vejo uma barra de rolagem superior invertida divno Chrome 29 no violino Top / Bottom Invertendo .

Mathijs Flietstra

Aparentemente, é um bug do navegador . Atualizei meu Fiddle na resposta. verifique agora.

Avrahamcool

No Google Chrome 35.0.1916.153, quando eu giro duas vezes, há alguns problemas com entradas / seleção. No FF tudo funciona bem.

lechup de

@lechup você pode postar um violino? vamos tentar ajudar.

Avrahamcool

1

Acabei de descobrir um bug (no Edge). Se o conteúdo invertido contiver uma tabela com caixas de seleção em cada uma de suas linhas, os eventos de ponteiro ficarão confusos. Se você marcar a última caixa de seleção, ela marcará a primeira e vice-versa. Veja fiddle jsfiddle.net/uPwfn/646

James Cazzetta

Answer 8

1

Não vejo uma barra de rolagem superior invertida divno Chrome 29 no violino Top / Bottom Invertendo .

Mathijs Flietstra

Answer 9

Aparentemente, é um bug do navegador . Atualizei meu Fiddle na resposta. verifique agora.

Avrahamcool

Answer 10

No Google Chrome 35.0.1916.153, quando eu giro duas vezes, há alguns problemas com entradas / seleção. No FF tudo funciona bem.

lechup de

Answer 11

@lechup você pode postar um violino? vamos tentar ajudar.

Avrahamcool

Answer 12

1

Acabei de descobrir um bug (no Edge). Se o conteúdo invertido contiver uma tabela com caixas de seleção em cada uma de suas linhas, os eventos de ponteiro ficarão confusos. Se você marcar a última caixa de seleção, ela marcará a primeira e vice-versa. Veja fiddle jsfiddle.net/uPwfn/646

James Cazzetta

Answer 13

Aqui é uma outra maneira, por rotating elementcom o scrollbarde 180deg,embrulho é contentem outro elemento, e rotatingque wrapperpara -180deg. Verifique o snippet abaixo

Exibir trecho 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 snippet

Answer 14

1

Inteligente, mas pelo menos no meu firefox Linux tem o efeito colateral de trocar os efeitos de inserção / início do manipulador e barra de rolagem; o que é super confuso.

Martin Tournoij

Answer 15

olhada neste ansower stackoverflow.com/questions/7889449/...

Shaddad

Answer 16

@Carpetsmoker sim, corrigido com a direção rtle ltr. Portanto, terá efeito de rolagem nativo, scroll-down na parte inferior e scroll-upna parte superior

O Processo

Answer 17

1

Sim, é fixo para a vertical, mas não para a horizontal.

Martin Tournoij

Answer 18

3

Experimente isso. Espero que isto ajude

<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
fonte

ideia inteligente usando diraprendi algo novo, mas eu precisava de cima e de baixo também

Endless

Answer 19

ideia inteligente usando diraprendi algo novo, mas eu precisava de cima e de baixo também

Endless

Como mudar a posição da barra de rolagem com CSS?

Respostas: