Is there any way to change position of scroll bar from left to right or from bottom to top with CSS ?
-
Scroll bar of your browser?– user1860859Sep 25, 2013 at 6:30
-
try this plugin jscrollpane.kelvinluck.com This jquery plugin will allow you to do custom css on scroll bar.– user1860859Sep 25, 2013 at 6:37
-
The only thing I can think of is to have a custom scrollbar and style that to position it how you like. The jscrollpane plugin suggested by @AwaisUmar is something I've used in the past and is a pretty good start.– ZhihaoSep 25, 2013 at 6:44
-
Rather all browser, but if you know about specific browser, tell us– Mohsen SafariSep 25, 2013 at 6:44
-
There's no way of doing it with pure CSS.– ItaySep 25, 2013 at 6:50
4 Answers
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 */
}
-
1I don't see a top scrollbar on the flipped
div
in Chrome 29 on the Top/Bottom Flipping fiddle. Sep 25, 2013 at 7:23 -
Apparently, its a browser bug. I've Updated my Fiddle in the answer. check it now. Sep 25, 2013 at 7:47
-
In Google Chrome 35.0.1916.153 when I double rotate there are some problems with inputs/selection. In FF everything works OK.– lechupJun 16, 2014 at 6:11
-
-
1I just discovered a bug (on Edge). If the flipped content contains a table with checkboxes on each of it's rows, the pointer-events are going to get messed up. If you select the last checkbox, it will select the first and vice-versa. See fiddle jsfiddle.net/uPwfn/646 Oct 12, 2017 at 13:42
Here is another way, by rotating element
with the scrollbar
for 180deg,
wrapping it's content
into another element, and rotating
that wrapper
for -180deg
.
Check the snippet below
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>
-
1Clever, but at least on my Linux firefox it has the side-effect of swapping the inset/outset effects of the handler and scrollbar; which is super-confusing. Mar 4, 2016 at 4:27
-
-
@Carpetsmoker yes, fixed wit the
rtl
andltr
direction. So it will have native scroll efect,scroll-down
to bottom, andscroll-up
to top Mar 4, 2016 at 4:49 -
1
Try this out. Hope this helps
<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;
}
-
clever idea using
dir
learned something new, but i needed top and bottom too– EndlessFeb 24, 2018 at 20:40
there is a simple way actually, just change the "direction" property of the container element (the one that has the scroll bar) to "rtl" and the child element to "ltr"
/*this is the container*/
#home {
direction: rtl;/*this here*/
padding-left: 20px;
}
/*this is the child*/
.content-container {
direction: ltr;/*this here*/
width: 100%;
}