Вопрос:
Есть ли способ изменить положение полосы прокрутки слева направо или снизу вверх с помощью CSS?
Лучший ответ:
Использование только 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 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; } Ответ №2
Вот еще один способ: 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>
