Jak zmienić pozycję paska przewijania za pomocą CSS?

Question 1

Czy istnieje sposób na zmianę pozycji paska przewijania z lewej na prawą lub z dołu do góry za pomocą CSS?

Question 2

Korzystanie tylko z CSS:

Flippiing w prawo / w lewo: skrzypce robocze

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

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

Przerzucanie od góry do dołu: skrzypce robocze

.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

Oto inny sposób, za rotating elementpomocą scrollbardo 180deg,zawijania go contentw inny element, a rotatingto wrapperdo -180deg. Sprawdź poniższy fragment

Pokaż fragment kodu

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>

Expand snippet

Question 4

Wypróbuj to. Mam nadzieję że to pomoże

<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

97

Czy istnieje sposób na zmianę pozycji paska przewijania z lewej na prawą lub z dołu do góry za pomocą CSS?

html css scrollbar Mohsen Safari
źródło

Pasek przewijania w Twojej przeglądarce?

Awais Umar

wypróbuj tę wtyczkę jscrollpane.kelvinluck.com Ta wtyczka jquery umożliwia wykonanie niestandardowego css na pasku przewijania.

Awais Umar

Jedyne, co przychodzi mi do głowy, to mieć niestandardowy pasek przewijania i styl, który pozwala ustawić go tak, jak lubisz. Wtyczka jscrollpane zasugerowana przez @AwaisUmar jest czymś, czego używałem w przeszłości i jest całkiem dobrym początkiem.

Zhihao

Raczej wszystkie przeglądarki, ale jeśli znasz konkretną przeglądarkę, powiedz nam

Mohsen Safari

Nie da się tego zrobić za pomocą czystego CSS.

Itay,

Answer 2

Pasek przewijania w Twojej przeglądarce?

Awais Umar

Answer 3

wypróbuj tę wtyczkę jscrollpane.kelvinluck.com Ta wtyczka jquery umożliwia wykonanie niestandardowego css na pasku przewijania.

Awais Umar

Answer 4

Jedyne, co przychodzi mi do głowy, to mieć niestandardowy pasek przewijania i styl, który pozwala ustawić go tak, jak lubisz. Wtyczka jscrollpane zasugerowana przez @AwaisUmar jest czymś, czego używałem w przeszłości i jest całkiem dobrym początkiem.

Zhihao

Answer 5

Raczej wszystkie przeglądarki, ale jeśli znasz konkretną przeglądarkę, powiedz nam

Mohsen Safari

Answer 6

Nie da się tego zrobić za pomocą czystego CSS.

Itay,

Answer 7

127

Korzystanie tylko z CSS:

Flippiing w prawo / w lewo: skrzypce robocze

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

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

Przerzucanie od góry do dołu: skrzypce robocze

.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
źródło

1

Nie widzę górnego paska przewijania na przewróconym divw Chrome 29 na skrzypcach do przewijania górnego / dolnego .

Mathijs Flietstra

Najwyraźniej jest to błąd przeglądarki . Zaktualizowałem moje Fiddle w odpowiedzi. Sprawdź to teraz.

avrahamcool

W Google Chrome 35.0.1916.153, gdy obracam dwukrotnie, pojawiają się problemy z danymi wejściowymi / selekcją. W FF wszystko działa OK.

lechup

@lechup czy możesz opublikować skrzypce? postaramy się pomóc.

avrahamcool

1

Właśnie odkryłem błąd (w Edge). Jeśli odwrócona zawartość zawiera tabelę z polami wyboru w każdym z jej wierszy, zdarzenia wskaźnikowe zostaną pomieszane. Jeśli zaznaczysz ostatnie pole wyboru, wybierze pierwsze i odwrotnie. Zobacz fiddle jsfiddle.net/uPwfn/646

James Cazzetta,

Answer 8

1

Nie widzę górnego paska przewijania na przewróconym divw Chrome 29 na skrzypcach do przewijania górnego / dolnego .

Mathijs Flietstra

Answer 9

Najwyraźniej jest to błąd przeglądarki . Zaktualizowałem moje Fiddle w odpowiedzi. Sprawdź to teraz.

avrahamcool

Answer 10

W Google Chrome 35.0.1916.153, gdy obracam dwukrotnie, pojawiają się problemy z danymi wejściowymi / selekcją. W FF wszystko działa OK.

lechup

Answer 11

@lechup czy możesz opublikować skrzypce? postaramy się pomóc.

avrahamcool

Answer 12

1

Właśnie odkryłem błąd (w Edge). Jeśli odwrócona zawartość zawiera tabelę z polami wyboru w każdym z jej wierszy, zdarzenia wskaźnikowe zostaną pomieszane. Jeśli zaznaczysz ostatnie pole wyboru, wybierze pierwsze i odwrotnie. Zobacz fiddle jsfiddle.net/uPwfn/646

James Cazzetta,

Answer 13

Oto inny sposób, za rotating elementpomocą scrollbardo 180deg,zawijania go contentw inny element, a rotatingto wrapperdo -180deg. Sprawdź poniższy fragment

Pokaż fragment kodu

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>

Expand snippet

Answer 14

1

Sprytne, ale przynajmniej w moim firefoksie dla Linuksa ma efekt uboczny zamiany efektów wstawiania / początku obsługi i paska przewijania; co jest bardzo zagmatwane.

Martin Tournoij

Answer 15

spójrz na ten stackoverflow odpowiedzi.com/questions/7889449/ ...

shaddad

Answer 16

@Carpetsmoker tak, poprawiono kierunek rtli ltr. Więc będzie miał natywny efekt przewijania, scroll-down do dołu i scroll-updo góry

Proces

Answer 17

1

Tak, jest ustalony dla pionu, ale nie dla poziomu.

Martin Tournoij

Answer 18

3

Wypróbuj to. Mam nadzieję że to pomoże

<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
źródło

sprytny pomysł wykorzystujący dirnauczyłem się czegoś nowego, ale potrzebowałem też góry i dołu

Endless

Answer 19

sprytny pomysł wykorzystujący dirnauczyłem się czegoś nowego, ale potrzebowałem też góry i dołu

Endless

Jak zmienić pozycję paska przewijania za pomocą CSS?

Odpowiedzi: