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


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?


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

Respostas:


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

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

4

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


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


@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

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

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

ideia inteligente usando diraprendi algo novo, mas eu precisava de cima e de baixo também
Endless
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.