Menu
Is there any way to change position of scroll bar from left to right or from bottom to top with CSS ?
448
Scroll bars are utilized using the mouse, touchpad, or keyboard. With a mouse, you can move the scroll bar by clicking the scroll arrow at either end of the scroll bars. You may also click an empty portion of the scroll bar, or click-and-drag the scroll box.
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit. If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.
Using CSS only:
Right/Left Flippiing: Working Fiddle
.Container { height: 200px; overflow-x: auto; } .Content { height: 300px; } .Flipped { direction: rtl; } .Content { direction: ltr; } Top/Bottom Flipping: Working Fiddle
.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 */ } 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
