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

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

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

— Avrahamcool
fonte

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

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

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

— O processo
fonte

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

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

— Shaddad

@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

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

— Martin Tournoij

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