Menu
I currently use the following to make the scrollbar appear on the left, rather than the right:
HTML:
<div class="leftscrollbar"><div>Content here</div></div>
CSS:
.leftscrollbar {
overflow:auto;
transform:scaleX(-1);
}
.leftscrollbar>div {
transform:scaleX(-1);
}
It works great, but is there a better way than using two transforms?
330
You can reverse the side of the scrollbar in modern browsers using transform: scaleX(-1) on a parent <div> , then apply the same transform to reverse a child, "sleeve" element. Note: You may need to use an -ms-transform or -webkit-transform prefix for browsers as old as IE 9.
We can use the CSS “::-webkit-scrollbar” property which is responsible for changing the shape, color, size, shade, shadow, etc. of the scroll bar. But, here the property which we will use is the direction property of CSS for changing the position of the scroll bar.
Microsoft Office Word and Excel have an option to move scroll bar to the left by enabling " right to left language setting ", such as Arabic. Once right to left language setting is enable, an option to move scroll bar to the left is available. Was this reply helpful?
You could use the direction property,
direction: rtl;
Set direction: rtl on the parent element and direction: ltr on the child element:
.leftscrollbar {
height: 100px;
overflow: auto;
direction: rtl;
}
.leftscrollbar>div {
direction: ltr;
}<div class="leftscrollbar">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum fusce ut placerat orci nulla pellentesque dignissim enim sit. Pretium quam vulputate dignissim suspendisse in est ante. Purus sit amet luctus venenatis lectus. Integer vitae justo eget magna fermentum. Neque egestas congue quisque egestas diam in arcu cursus euismod. Orci nulla pellentesque dignissim enim sit amet. Pulvinar pellentesque habitant morbi tristique senectus et netus. Sit amet dictum sit amet justo donec enim. Ultrices sagittis orci a scelerisque purus semper eget duis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Elementum curabitur vitae nunc sed. Adipiscing commodo elit at imperdiet dui. Adipiscing elit pellentesque habitant morbi tristique senectus et. Bibendum arcu vitae elementum curabitur vitae nunc sed velit. Lobortis mattis aliquam faucibus purus in massa tempor nec. Curabitur vitae nunc sed velit dignissim sodales. Aliquet nibh praesent tristique magna sit amet purus. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Turpis massa tincidunt dui ut ornare lectus sit. Neque vitae tempus quam pellentesque. Elit at imperdiet dui accumsan sit amet nulla facilisi. Tempus egestas sed sed risus pretium. Eget gravida cum sociis natoque penatibus et. Amet massa vitae tortor condimentum lacinia quis vel. Sapien et ligula ullamcorper malesuada.
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
