How would I use overflow-x: hidden on the body, but keep overflow-y: scroll?
I just put overflow: hidden on the body, and it worked (no scrolling on either axis). But when I try to specify an axis, like overflow-x: hidden, suddenly both axes become scrollable.
This should apply only to the body- I don't want to wrap anything inside a "wrapper" div.
This works, but cause both axes to not scroll:
body {
overflow: hidden;
}
This causes both axes to scroll:
body {
overflow-x: hidden;
}
The only thing inside the body is an absolutely positioned element.
I've concluded that this is probably a bug in WebKit. According to this link:
https://css-tricks.com/findingfixing-unintended-body-overflow/
the author mentions this exact problem of specifying an axis inside body. It looks like you would have to use a wrapper div, as mentioned in other questions.
Related
I have set overflow: hidden for my body to keep the contents only inside the viewport and to disable scrolling. Body height is fixed.
But I have a component which should have the ability to scroll horizontally.
Since I have hidden overflow in body, now I can't enable scrolling in that component.
Any solution?
Add this to your component style:
height: 100vh;
overflow: auto;
You can add in style-sheet:
overflow-x:auto;
In THIS scenario, I don't want the last .child's .hang to add up to the height and incur additional scroll. I want it to protrude outside .parent instead, on scroll.
How can I achieve this?
If you want the parent to stay the size you have it, but you want the last child to have a smaller hang, you can use the css pseudo-class selector :last-child.
It sounds like you want to change the overflow-y of the child class that is the last child of its parent. If you change it to :hidden, it should do what you are expecting.
.child:last-child {
overflow-y: hidden;
}
See this JS-Bin for an example.
EDIT
In response to the modification of the question, I see that you want to have the .hang protrude outside of the .parent object. If I'm understanding your desired look correctly, you have a .hang as a child of .child, which itself is a child of .parent, and you want the overhang from .hang to protrude outside of the outer .parent object.
Unfortunately, I do not believe this exact behavior is possible. Once you use overflow-y: scroll, then any part of any child that extends beyond the bounds of the container is truncated, and you have to scroll it into view.
If I understand what you want, you can change:
overflow-y: scroll;
to:
overflow-y: visible;
That'll flow the .hangs ouside the .parent without a scrollbar.
In Safari, when a parent element has overflow-y set to auto, it treats overflow-x as scroll or visible when a child element has a position fixed. Is there a work around for this? Please see this jsFiddle
.flyout{
position: fixed;
//this doesnt display
}
.parent{
overflow-y: auto
}
The flyout element is not visible in safari, while it is still visible in chrome, and firefox
http://jsfiddle.net/magicdawn/vt1cweyx/10/
remove overflow related from wrapper
add height & overflow-y to a direct child
Since overflow-x: visible and overflow-y: scroll behaves strange in safari, so we split them to 2 elements.
the top wrapper .parent handles overflow-x: visible
inner element .menu handles overflow-y: scroll
I have a div with propertie overflow auto. How to make the content of this div horizontally aligned with and without the scrollbar displayed. The scrollbar is messing with the div width. I hope you understand.
overflow-x: scroll;
overflow-y: hidden;
source: Div with horizontal scrolling only
Try using overflow-y: overlay instead.
.your-content{
overflow-y: overlay;
}
NOTE::: overflow-y: overlay has been deprecated.
But this will make the scrollbar appear as an overlay without affecting the width of div or element.
Is it possible to achieve only horizontal overflow in CSS 2.1?
overflow: auto;
Will cause a block element to have both horizontal and vertical scrollbars. I want a block element (let's say <div>) which will display only horizontal scrollbars. How do I do that?
Try overflow-x: auto;
It even works in IE6!
I tried overflow-x: hidden; and that worked for me.
overflow-x: clip;
Was what I needed