I'm adding the overflow-y parameter to "scroll" in my css in order to have scrolling bar in case of overflow..
My problem is that if the content is not overflowing - i'm still having the blank scroll bar.
How can i set the overflow to show the scrolling bar only when needed ?
You can set it to auto
overflow-y : auto;
It will only show scroll bar in case of overflow.
Refer : What browsers support `overflow-y`?
as mentioned before, the way to do this is by setting:
overflow-y: auto
When setting the property to auto, the browser determines how to handle the content, but generally, the scrollbar appears when it is required.
You would greatly benefit from learning more about the overflow property. There is a great article here that explains it nicely.
Related
I'm working on a chat system and I would like a functional scrollbar to appear to go to the top / beginning of the conversation.
I use overflow-y CSS propery. When its value is egal to scroll, the scrollbar appears but it is not functional.
The best mode would be auto for overflow-y.
I need some help to make it work please.
Full code here.
Many thanks.
I saw the full code but there was no problem
overflow-y : scroll is ok
Hello stackoverflow users,
Today I am using the overflow:scroll; property so I can hide all content but allow users to see it with a scroll bar.
See below picture:
You can see that the scroll bars appear even when not needed. Is there a way I can hide the scroll bar until needed, ie when there is actually overflowing content. It is a cosmetic issue for me as the scroll bar at the moment are naturally locked since there is no overflowing content, so why display it (I would prefer it not to be displayed just in case others have different opinions).
Regards
You can use overflow:auto instead of overflow:scroll
With overflow:scroll http://jsfiddle.net/0wekc9p2/1/
with overflow:auto http://jsfiddle.net/0wekc9p2/2/
I would suggest you to set overflow property to auto. or remove the property altogether if it is not inherited.
In your CSS put this code within body tag
body {
overflow:hidden
}
When I was studying the overflow property's values, I came across these two values: auto and scroll, which adds scrollbar(s) if the content overflows the element.
Could someone please explain me whats the difference between them?
Auto will only show a scrollbar when any content is clipped.
Scroll will however always show the scrollbar even if all content fits and you cant scroll it.
overflow: scroll will hide all overflowing content and cause scroll bars to appear on the element in question. If the content does not overflow, the scrollbars will still be visible, but disabled.
overflow: auto is very similar, but the scrollbars only appear when the content is overflowing.
There is a similar explanation of this here, with some screenshots to illustrate the point.
Take a look at CSS Tricks.
Auto will show scrollbar if and only if the content overflows; but scroll will always show the scrollbar, whether the content is overflowing or not.
Adding a point to the answer, Overflow:auto not worked in IE7 when position of the container is absolute Position relative overflow IE7. But setting Overflow:scroll works
overflow: scroll will show both horizontal and vertical scrollbar even when you don't need one or other. while, overflow: auto will show the scrollbar which your div needs. so basically auto will help you to get rid of both scollbar.
Here is more of that:
https://css-tricks.com/the-css-overflow-property/
In Windows, overflow: scroll will always show the scrollbar and overflow: auto will show the scrollbar only if the content is overflowing. In macOS, the overflow: scroll and overflow: auto will always show the scrollbar if the content is overflowing. Tested in Chrome. I highly recommend using overflow: auto as it works the same way and does not generate problems in windows
I have a website will have a background that is the full size of the screen. Because of cross-browser limitations, some of them like to keep a scroll bar even if the image is about the exact size of the screen. Is it possible for me to just remove the scroll bars?
In case you couldn't tell, I'm working with HTML, CSS, and JavaScript :)
body {
overflow: hidden;
}
and for ie 7
html {
overflow: hidden;
}
Try property:
overflow:hidden;
See also:
http://www.w3schools.com/Css/pr_pos_overflow.asp
Make sure your image is applied via the body tag, and if that does not work make sure it is applied to the html tag both of these tags via the Cascading Style Sheet file for example.
body {
background: url("image-src");
overflow: hidden;
}`
html {
background: url("image-src");
overflow: hidden;
}
Also remember to try and have the background image be of reasonable height and width.
Hope this helps.
Try adding html {overflow:auto;} to your CSS declarations. Auto overflow only gives the element the scroll bars it needs, even none at all. In the case of the disabled vertical scroll bar in IE, using auto overflow will remove it if it isn't needed.
This works a little better than using hidden overflow because you're declaring it on html or body. If your browser window becomes smaller than, not only your image but, your content you won't have any scroll bars with hidden overflow. As #Marc B said in a comment, removing user interface components to enforce a design is generally considered bad design.
You can read more about the overflow property here. From the site:
IE Trick
IE displays a vertical scrollbar all the time whether it needs it or not. This can be nice > for preventing horizontal jumps, but isn't always desirable. To remove this in IE, you can > set overflow to auto on the body element.
Is there a way to tell Safari / Webkit browsers and Firefox to scroll an element or a page while overflow is set to "hidden"?
I'm using overflow: hidden on the body-Element and it works for Opera only.
Any ideas?
Pretty sure this is one of those cases where Opera does it differently from everyone else. Overflow is supposed to prevent scrolling if its value is hidden, not just hide scroll bars.
If you really want to hide the scroll bars, but still want to scroll the window or its contents, you can use JavaScript / DOM script to do it.
Sorry but you have been mistaken, the overflow-x:hidden or overflow-y:hidden must be applied to the html element, not body element. But in just the case I have googled it and found these
link tell me if they did any help.
http://www.webmasterworld.com/javascript/3560359.htm
http://www.artmov.com/dev/snippets/apply-overflow-x-overflow-y-to-body-in-ie7-ie6-84/
(In this link I found the above mentioned statement.)
http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
In this link I found that you should apply directly overflow value in the <HTML> tag.
Hope it works!
If you're setting overflow: hidden on any element, you're explicitly telling it that the contents should be hidden, and therefore can't be scrolled to. If you want the contents to be scrollable, then you need to use overflow: auto. Why would you ever want to scroll something you're telling the browser it should not scroll? It's contradictory.