Как переместить вертикальную полосу прокрутки справа на лево, не используя direction: rtl? Из-за этого свойства, она хоть и слева, но то, что нужно отобразить, уезжает и js не правильно работает с элементом и это дискомфорт для моих посетителей. Может быть, уже jQuery библиотеки есть для этого? Буду рад помощи.
1 ответ
Я выбрал два варианта ответов из данного вопроса
Оба предполагают наличие дополнительного элемента вокруг того, где нужна левая прокрутка.
В первом случае таки используется rtl
Во втором случае используется transform
. Для более старых браузеров могут понадобиться префиксы -ms-transform
или -webkit-transform
Класс demo
используется только для визуальной демонстрации здесь, на StackOverflow сайте
.demo {
max-height: 100px;
}
.parent {
overflow: auto;
transform: scaleX(-1);
}
.sleeve {
transform: scaleX(-1);
}
.parent2 {
unicode-bidi: bidi-override;
direction: rtl;
overflow: scroll;
overflow-x: hidden!important;
}
.sleeve2 {
direction: ltr;
}
<div class="parent">
<div class="sleeve demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Netus et
malesuada fames ac turpis egestas. Justo nec ultrices dui sapien eget. Varius duis at consectetur lorem donec massa sapien faucibus. Turpis cursus in hac habitasse platea. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec
donec et odio pellentesque diam volutpat. Amet volutpat consequat mauris nunc congue nisi vitae. Eu nisl nunc mi ipsum faucibus vitae aliquet. Justo eget magna fermentum iaculis. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Enim
neque volutpat ac tincidunt vitae.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Netus et
malesuada fames ac turpis egestas. Justo nec ultrices dui sapien eget. Varius duis at consectetur lorem donec massa sapien faucibus. Turpis cursus in hac habitasse platea. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec
</div>
</div>
<div class="parent2">
<div class="sleeve2 demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Quis imperdiet massa tincidunt nunc pulvinar sapien. Netus et
malesuada fames ac turpis egestas. Justo nec ultrices dui sapien eget. Varius duis at consectetur lorem donec massa sapien faucibus. Turpis cursus in hac habitasse platea. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec
donec et odio pellentesque diam volutpat. Amet volutpat consequat mauris nunc congue nisi vitae. Eu nisl nunc mi ipsum faucibus vitae aliquet. Justo eget magna fermentum iaculis. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Enim
neque volutpat ac tincidunt vitae.
</div>
</div>
-
-
Осталось получить от автора ответ на вопрос "а нахрена?"... Commented 23 апр. 2019 в 15:31