Bagaimana cara mengubah posisi scroll bar dengan CSS?

Apakah ada cara untuk mengubah posisi scroll bar dari kiri ke kanan atau dari bawah ke atas dengan CSS?

html css scrollbar

— Safari Mohsen
sumber

Scroll bar browser Anda?

— Awais Umar

coba plugin ini jscrollpane.kelvinluck.com Plugin jquery ini akan memungkinkan Anda untuk melakukan custom css pada scroll bar.

— Awais Umar

Satu-satunya hal yang dapat saya pikirkan adalah memiliki scrollbar dan gaya khusus yang memposisikannya sesuka Anda. Plugin jscrollpane yang disarankan oleh @AwaisUmar adalah sesuatu yang saya gunakan di masa lalu dan merupakan awal yang cukup baik.

— Zhihao

Agak semua browser, tetapi jika Anda tahu tentang browser tertentu, beri tahu kami

— Mohsen Safari

Tidak ada cara untuk melakukannya dengan CSS murni.

— Itay

Jawaban:

125

Hanya menggunakan CSS:

Flippiing Kanan / Kiri: Working Fiddle

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

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

Membalik Atas / Bawah: Fiddle Bekerja

.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.dll
sumber

Saya tidak melihat scrollbar atas di membalik divdi Chrome 29 di biola Flipping Atas / Bawah .

— Mathijs Flietstra

Rupanya, ini adalah bug browser . Saya telah memperbarui Biola saya dalam jawaban. Periksa sekarang.

— avrahamcool

Di Google Chrome 35.0.1916.153 ketika saya memutar ganda ada beberapa masalah dengan input / seleksi. Di FF semuanya bekerja dengan baik.

— lechup

@lechup bisakah kamu memposting biola? kami akan mencoba membantu.

— avrahamcool

Saya baru saja menemukan bug (di Edge). Jika konten yang dibalik berisi tabel dengan kotak centang di setiap barisnya, peristiwa penunjuk akan menjadi kacau balau. Jika Anda memilih kotak centang terakhir, itu akan memilih yang pertama dan sebaliknya. Lihat biola jsfiddle.net/uPwfn/646

— James Cazzetta

Berikut adalah cara lain, rotating elementdengan scrollbaruntuk 180deg,membungkusnya contentmenjadi elemen lain, dan rotatingitu wrapperuntuk -180deg. Periksa cuplikan di bawah

Tampilkan cuplikan kode

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>

Luaskan cuplikan

— Proses
sumber

Pintar, tetapi setidaknya di firefox Linux saya, ia memiliki efek samping dari menukar efek inset / awal dari handler dan scrollbar; yang sangat membingungkan.

— Martin Tournoij

lihat ini lebih kuat stackoverflow.com/questions/7889449/…

— shaddad

@Carpetsmoker ya, tetap dengan arah rtldan ltrarah. Jadi itu akan memiliki efek gulungan asli, scroll-down ke bawah, dan scroll-upke atas

— Proses

Ya, itu diperbaiki untuk vertikal, tapi bukan horizontal.

— Martin Tournoij

Coba ini. Semoga ini membantu

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

ide cerdas menggunakan dirmempelajari sesuatu yang baru, tetapi saya membutuhkan atas dan bawah juga

— Endless