Как изменить положение полосы прокрутки с помощью CSS?


94

Есть ли способ изменить положение полосы прокрутки слева направо или снизу вверх с помощью CSS?


Полоса прокрутки вашего браузера?
Аваис Умар,

попробуйте этот плагин jscrollpane.kelvinluck.com Этот плагин jquery позволит вам создавать собственные CSS на полосе прокрутки.
Аваис Умар,

Единственное, о чем я могу думать, - это иметь настраиваемую полосу прокрутки и стиль, чтобы расположить ее так, как вам нравится. Плагин 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 */
}

1
Я не вижу верхней полосы прокрутки на перевернутой divв Chrome 29 скрипке Top / Bottom Flipping .
Mathijs Flietstra

Видимо, это ошибка браузера . Я обновил свою скрипку в ответе. Проверь это сейчас.
avrahamcool

В Google Chrome 35.0.1916.153 при двойном повороте возникают проблемы с вводом / выбором. В FF все работает нормально.
lechup

@lechup можешь выложить скрипку? мы постараемся помочь.
avrahamcool

1
Я только что обнаружил ошибку (на Edge). Если перевернутое содержимое содержит таблицу с флажками в каждой из ее строк, события указателя будут испорчены. Если вы установите последний флажок, будет выбран первый и наоборот. См. Скрипку jsfiddle.net/uPwfn/646
Джеймс Каззетта,

3

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


1
Умно, но, по крайней мере, на моем Linux firefox у него есть побочный эффект - поменять местами эффекты вставки / начала обработчика и полосы прокрутки; что очень сбивает с толку.
Мартин Турной,

посмотрите на этот ответ stackoverflow.com/questions/7889449/…
shaddad

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

1
Да, по вертикали он фиксированный, но не по горизонтали.
Мартин Турной, 04

2

Попробуйте это. Надеюсь это поможет

<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чего-то нового, но мне нужны были и верх, и низ
Endless
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.