Is there any way to change position of scroll bar from left to right or from bottom to top with CSS ?
7
-
Scroll bar of your browser?user1860859– user18608592013-09-25 06:30:12 +00:00Commented Sep 25, 2013 at 6:30
-
try this plugin jscrollpane.kelvinluck.com This jquery plugin will allow you to do custom css on scroll bar.user1860859– user18608592013-09-25 06:37:08 +00:00Commented Sep 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.Zhihao– Zhihao2013-09-25 06:44:00 +00:00Commented Sep 25, 2013 at 6:44
-
Rather all browser, but if you know about specific browser, tell usMohsen Safari– Mohsen Safari2013-09-25 06:44:23 +00:00Commented Sep 25, 2013 at 6:44
-
There's no way of doing it with pure CSS.Itay– Itay2013-09-25 06:50:27 +00:00Commented Sep 25, 2013 at 6:50
|
Show 2 more comments
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 */
}
12 Comments
Mathijs Flietstra
I don't see a top scrollbar on the flipped
div in Chrome 29 on the Top/Bottom Flipping fiddle.
avrahamcool
Apparently, its a browser bug. I've Updated my Fiddle in the answer. check it now.
lechup
In Google Chrome 35.0.1916.153 when I double rotate there are some problems with inputs/selection. In FF everything works OK.
avrahamcool
@lechup can you post a fiddle? we'll try to help.
James Cazzetta
I 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
|
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>4 Comments
Martin Tournoij
Clever, 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.
shaddad
look at this ansower stackoverflow.com/questions/7889449/…
The Process
@Carpetsmoker yes, fixed wit the
rtl and ltr direction. So it will have native scroll efect, scroll-down to bottom, and scroll-up to topMartin Tournoij
Yeah, it's fixed for the vertical, but not the horizontal.
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;
}
Comments
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%;
}