Come cambiare la posizione della barra di scorrimento con CSS?

C'è un modo per cambiare la posizione della barra di scorrimento da sinistra a destra o dal basso verso l'alto con CSS?

html css scrollbar

— Mohsen Safari
fonte

Barra di scorrimento del tuo browser?

— Awais Umar,

prova questo plugin jscrollpane.kelvinluck.com Questo plugin jquery ti permetterà di fare CSS personalizzati sulla barra di scorrimento.

— Awais Umar,

L'unica cosa a cui riesco a pensare è avere una barra di scorrimento personalizzata e uno stile per posizionarla come preferisci. Il plugin jscrollpane suggerito da @AwaisUmar è qualcosa che ho usato in passato ed è un buon inizio.

— Zhihao,

Piuttosto tutti i browser, ma se conosci un browser specifico, dicci

— Mohsen Safari

Non c'è modo di farlo con CSS puro.

— Itay

Risposte:

125

Utilizzando solo CSS:

Flippiing destro / sinistro: violino funzionante

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

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

Capovolgimento dall'alto / dal basso: violino funzionante

.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

Non vedo una barra di scorrimento superiore sul capovolto divin Chrome 29 sul violino Flipping superiore / inferiore .

— Mathijs Flietstra

A quanto pare, è un bug del browser . Ho aggiornato il mio violino nella risposta. controllalo adesso.

— avrahamcool

In Google Chrome 35.0.1916.153 quando giro due volte ci sono dei problemi con gli input / selezione. In FF tutto funziona bene.

— lechup

@lechup puoi postare un violino? proveremo ad aiutare.

— avrahamcool

Ho appena scoperto un bug (su Edge). Se il contenuto capovolto contiene una tabella con caselle di controllo su ciascuna delle sue righe, gli eventi del puntatore verranno incasinati. Se selezioni l'ultima casella di controllo, selezionerà la prima e viceversa. Vedi violino jsfiddle.net/uPwfn/646

— James Cazzetta

Ecco un altro modo, rotating elementcon il scrollbarper 180deg,avvolgerlo contentin un altro elemento, e rotatingquello wrapperper -180deg. Controlla lo snippet di seguito

Mostra snippet di codice

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>

Espandi lo snippet

— Il processo
fonte

Intelligente, ma almeno sul mio Firefox Linux ha l'effetto collaterale di scambiare gli effetti inset / outset del gestore e della barra di scorrimento; che è molto confuso.

— Martin Tournoij

un'occhiata a questo ansower stackoverflow.com/questions/7889449/...

— Shaddad

@Carpetsmoker yes, fixed wit the rtland ltrdirection. Quindi avrà efetto di scorrimento nativo, scroll-down verso il basso e scroll-upverso l'alto

— Il processo

Sì, è fisso per la verticale, ma non per l'orizzontale.

— Martin Tournoij

Prova questo. Spero che sia di aiuto

<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

un'idea intelligente usando dirappreso qualcosa di nuovo, ma avevo bisogno anche di alto e basso

— Endless