Bagaimana cara mengubah posisi scroll bar dengan CSS?

94

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

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
1
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
1
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
3

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

Proses
sumber
1
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
1
Ya, itu diperbaiki untuk vertikal, tapi bukan horizontal.
Martin Tournoij
2

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