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

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,

Odpowiedzi:

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

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

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,

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

— Proces
źródło

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

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

— shaddad

@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

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

— Martin Tournoij

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