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
Related
I want to prevent the cards I have from leaving the div they are in when I resize the screen. I added overflow scroll in order to solve this and it works the way I would like but I don't understand what is causing this weird grey outline at the bottom of page. I dont have any styling that would cause it. I'm not sure if this a browser thing but is there a way to remove it?
I know the grey bar on the right is for scroll but what is the bar on the bottom across the card for?
Try overflow-y: scroll; instead of overflow: scroll;. This ensures the overflow scrollbar is only applied vertically.
Sorry for the terrible title, but I couldn't describe my issue succinctly enough.
I'm noticing a weird behaviour having to do with the scrollbars.
I have a fixed menu on the left side of my web page. The menu is scrollable if the number of options inside are several.
JSFiddle example
When you scroll the menu, the scroll bar appears and is superimposed over the content. I'm okay with that... IF that's the case every time!
It used to be that the style:
overflow-y: scroll
would force a vertical scroll bar to be visible all the time and taking up its own space as part of the containing div's width. So what I ended up doing is having a fixed-sized outer div and then an inner div that's just 15px wider to hide the scroll bar.
#outer {
width: 200px;
overflow: hidden;
}
#inner {
width: 215px;
overflow-y: scroll;
}
But this behaviour doesn't seem to be consistent. At work, with the above styles, everything shows up just fine. The buttons sit at the right edge and do no get cut off on the right. But when I get home, or just am working elsewhere, the scrollbar does that hover-over thing, and now the buttons are extending off the edge and partially hidden.
I thought it might have been a cross-browser issue at first, but it's not. Has anyone met with this problem? Thanks!
P.S. - Before anyone mentions some 3rd-party menu/sidebar code. That's a no go. I have tried some, but because of work-specific requirements, I figured it's easier for me to write this myself rather than fight any quirks that disagree with our needs.
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
}
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.
I have a div that has a lot of content and hence scrolls.. How can I hide the scrollbar such that it is not visible. EDIT: I do want scrolling to work! So.. Scrolling with no scrollbar?
eg
.scrolling_div {
overflow:auto;
/*something else to hide the scrollbar?*/
}
Ok, I spent sometime to write minimal code.
Check DEMO. Mouse over the div and scroll to see the scroller.
Note that this using an external plugin to listen to mousewheel event.
DEMO page for the plugin
overflow:hidden should hide the scrollbar.
.scrolling_div {
overflow: hidden;
}
overflow can take any one of the below values,
visible
Default value. Content is not clipped, it may be rendered outside the content box.
hidden
The content is clipped and no scrollbars are provided.
scroll
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment.Printers may print overflowing content.
auto
Provide scrollbars if content overflows.
Reference
overflow: auto; means "show a scrollbar if necessary". Change it to overflow: hidden; to disable scrolling.
EDIT: Okay, you want to make a custom scrollbar. Then see this sample jsFiddle for how to get started - it includes mouse wheeling and dragging of the scrollbar.
You can try this:
html {
overflow: hidden;
}
it will remove the scrollbar from all the window.
Otherwise if you need it only on a specific div:
.scrolling_div {
overflow: hidden;
}
Use a wrapper which covers the element you want to be scrollable without a scrollbar, and let the wrapper be narrower than the element to scroll, in the horizontal basis. This is what I mean: http://jsfiddle.net/FlagelloDiDio/EdgTt/
It really depends on what you are going for. see here
overflow:hidden; may be what you want.
If you want to dip into css3, you can play with overflow-x and overflow-y for even more options.
The only way to hide the scrollbar is to make the content non-scrollable and just cut off if it exceeds the height (overflow: hidden). Honestly, why would you want to have a page that is scrollable that doesn't have a scrollbar? That would confuse the heck out of any visitors. There's no way you can do this with CSS.
As far as customizing the scrollbar, there are JavaScripts out there to do that. But make sure that if the user has it disabled, they can still properly scroll the page without it.