Horizontal scrollbar appears with overflow content on right but not on left?
Solution 1
In order to have scrollbars appear, the parent element must have a set width.
For horizontal scrollbars using the property overflow-x:scroll;
on the parent will make the scrollbar appear.
Sounds similar to this issue: Div with horizontal scrolling only
To try and answer your questions:
-
The scrollbar appears when you use
right: -50px
because the standard flow of a HTML document is left to right. The CSS pushed the #test div out and the browser is able to continuing rendering to the right. It may look like part of the div is outwith the body at this point but it is not. Everything visible on an HTML page must be within the body. -
Using the CSS
display: rtl;
on a parent container or the body would make the scrollbars scroll left instead of right, however if you did this to the body the whole document would now work right to left, changing all positioning in the page. I'd suggest having a parent element with the CSS propertydisplay: rtl;
.
#parent {
position: static;
height: 100px;
width: 100px;
overflow-x: scroll;
overflow-y: hidden;
background-color: red;
direction: rtl;
}
#test {
width: 100px;
height: 100px;
background-color: lime;
position: relative;
left: -50px;
}
<div id="parent">
<div id="test">
</div>
</div>
Of course this means the #parent
element is always fully visible. If this was not wanted then the alternative is to set the direction:rtl;
but ensure any content you want displayed correctly is then in a wrapper div which has CSS direction: ltr;
to resume normal flow:
body {
direction: rtl;
overflow: scroll;
}
#allOtherContent {
direction: ltr;
width: 100%;
background-color: red;
}
#test {
width: 100px;
height: 100px;
background-color: lime;
position: absolute;
left: -50px;
}
<div id="test"></div>
<div id="allOtherContent"></div>
- Scrollbars appear when elements within another element are too big to fit. For this to work the browser needs to know the exact size of the parent element to determine that the test element is too big, and therefore needs to scroll.
In my example the #parent
has a width of 100px
, the same as the #test
div, however the #test
div has been pushed left 50px
relative to #parent
and therefore the #test
div now requires 150px
of space. The parent now has overflowing content and the CSS overflow-x:scroll;
adds our horizontal scrollbar.
More on how overflow and scrollbars work can be found here: https://developer.mozilla.org/en/docs/Web/CSS/overflow.
Hope that helps answer your questions.
Solution 2
You should be follow this css code
*{
overflow: visible;
}
#test{
position: absolute;
height: 100px;
width: 100px;
overflow-y:scroll;
left: -50px;
background-color: lime;
}
Solution 3
You need to change the direction from left to right (default) to right to left in the scrollable div.
direction: rtl;
This behaviour is due to the CSS direction property.
The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.
That is why it is working when the negative value is in the right rather than the left because the flow goes from left to right (ltr) and the negative right makes the scrollable area adapt.
body {
overflow: auto;
direction: rtl;
}
#test {
position: absolute;
height: 100px;
width: 100px;
left:-50px;
background-color: lime;
}
<div id="test"></div>
Comments
-
Vasily Liaskovsky almost 2 years
I have an element with
position: absolute
inbody
with some part of it to the left from left side.* { overflow: visible; } #test { position: absolute; height: 100px; width: 100px; left: -50px; background-color: lime; }
<div id="test"></div>
I expect that horizontal scrollbar should appear allowing to scroll the document to the hidden part of the element, but it doesn't. So, I have some questions about the case:
- Why it happens so, why scrollbar doesn't appear (it works fine with symmetric layout on the right side)?
- Is it ever possible to make it appear and scroll to the left ?
- Am I missing anything very basic about scrollbars?
-
Vasily Liaskovsky over 7 yearsNope, it doesn't work. Scrollbar is there, but no scrolling to the left
-
Vasily Liaskovsky over 7 yearsNope, it's basically the same I have
-
Vasily Liaskovsky over 7 yearsWhat browser do you use? Chrome / Firefox / IE9 all do not work.
-
Vasily Liaskovsky over 7 yearsWell, it's a trick that does show the scrollbar, but the target block here has no parts positioned outside of its container. I need scroll that shows element not fully contained inside the body.
-
Alvaro over 7 yearsOk, so please check the edited solution and let me know if it fits better.
-
Sawan mishra over 7 yearsI am using Chrome / Firefox.
-
Sawan mishra over 7 yearsSorry Vaslily. It's my mistake. You asking me about horizontal scrollbar and I am answering you about vertical scrollbar. I updated my code.
-
Vasily Liaskovsky over 7 yearsSame thing, #test is positioned partially outside of #container but both #test and #container are completely within body. There is nothing that is positioned outside of the
body
rectangle. -
Alvaro over 7 yearsYou can not scroll in the same container outside of itself.
-
Vasily Liaskovsky over 7 yearsWell, seems logical, but same thing with
right
works -
Alvaro over 7 yearsCould you post a fiddle showing what you mean with "right works"?
-
Vasily Liaskovsky over 7 yearsLet us continue this discussion in chat.
-
Sawan mishra over 7 yearsFor Horizontal scrollbar appears this is basic css structure.