Bagaimana cara mengubah posisi scroll bar dengan CSS?

Question 1

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

Question 2

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

Question 3

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

Question 4

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

Answer 1

94

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

Answer 2

Scroll bar browser Anda?

Awais Umar

Answer 3

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

Awais Umar

Answer 4

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

Answer 5

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

Mohsen Safari

Answer 6

Tidak ada cara untuk melakukannya dengan CSS murni.

Itay

Answer 7

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

Answer 8

1

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

Mathijs Flietstra

Answer 9

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

avrahamcool

Answer 10

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

lechup

Answer 11

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

avrahamcool

Answer 12

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

Answer 13

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

Answer 14

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

Answer 15

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

shaddad

Answer 16

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

Proses

Answer 17

1

Ya, itu diperbaiki untuk vertikal, tapi bukan horizontal.

Martin Tournoij

Answer 18

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

Answer 19

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

Endless

Bagaimana cara mengubah posisi scroll bar dengan CSS?

Jawaban: