Як змінити положення смуги прокрутки за допомогою CSS?

Чи є спосіб змінити положення смуги прокрутки зліва направо або знизу вгору за допомогою CSS?

html css scrollbar

Панель прокрутки вашого браузера?

— Awais Umar

спробуйте цей плагін jscrollpane.kelvinluck.com Цей плагін jquery дозволить вам робити власні css на смузі прокрутки.

— Awais Umar

Єдине, що я можу придумати, це мати власну смужку прокрутки та стиль, щоб розмістити її так, як вам подобається. Плагін jscrollpane, запропонований @AwaisUmar, я використовував у минулому і є досить хорошим початком.

— Zhihao

Швидше за все браузер, але якщо ви знаєте про конкретний браузер, повідомте нам

— Mohsen Safari

Це неможливо зробити за допомогою чистого CSS.

— Itay

Відповіді:

125

Лише за допомогою CSS:

Правий / Лівий гортання: Робоча скрипка

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

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

Перегортання зверху / знизу: Робоча скрипка

.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
джерело

Я не бачу верхньої смуги прокрутки у перегорнутому divChrome 29 на скрипці « Перевертання зверху / знизу» .

— Mathijs Flietstra

Очевидно, це помилка браузера . У відповіді я оновив свою скрипку. перевірити це зараз.

— avrahamcool

У Google Chrome 35.0.1916.153 при подвійному обертанні виникають проблеми з введеннями / вибором. У FF все працює нормально.

— лечуп

@lechup ти можеш опублікувати скрипку? ми спробуємо допомогти.

— avrahamcool

Я щойно виявив помилку (на Edge). Якщо перевернутий вміст містить таблицю з прапорцями на кожному з його рядків, події покажчика будуть зіпсовані. Якщо ви встановите останній прапорець, він позначить перший і навпаки. Дивіться скрипку jsfiddle.net/uPwfn/646

— James Cazzetta

Ось ще один спосіб, з допомогою rotating elementз scrollbarдля 180deg,упаковки це contentв інший елемент, і rotatingщо wrapperдля -180deg. Перевірте фрагмент нижче

Показати фрагмент коду

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>

Розгорніть фрагмент

— Процес
джерело

Розумно, але принаймні на моєму Linux firefox це має побічний ефект заміни ефектів вставки / виходу обробника та смуги прокрутки; що надзвичайно заплутано.

— Мартін Турной

подивитися на цей ansower stackoverflow.com/questions/7889449 / ...

— Шаддад

@Carpetsmoker так, виправлено дотепність rtlі ltrнапрямок. Тож він матиме власний ефект прокрутки, scroll-down знизу та scroll-upзверху

— Процес

Так, це виправлено для вертикалі, але не для горизонталі.

— Мартін Турной

Спробуйте це. Сподіваюся, це допомагає

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

— Піюш Ар'я
джерело

розумна ідея, використовуючи dirвивчене щось нове, але мені теж знадобилися верх і низ

— Нескінченні